پلاگین راهنمای ابزار

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

پلاگین Tooltip یک پنجرهٔ بازشو کوچک است که هنگامی که کاربر اشاره گر ماوس را روی یک عنصر قرار می‌دهد ظاهر می‌شود:[۱]

نکته: پلاگین‌ها را می‌توان بطور مجزا (با استفاده از فایل جداگانه “tooltip.js”) یا همه را با هم (با استفاده از فایل “bootstrap.js” یا “bootstrap.min.js”) اضافه کرد.

نحوهٔ ایجاد راهنمای ابزار (Tooltip)

برای ایجاد راهنمای ابزار، ویژگی data-toggle="tooltip" را به یک عنصر اضافه کنید.

از ویژگی title برای مشخص کردن متنی که بایر داخل Tooltip نمایش داده شود استفاده کنید:

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>html5
توجه: Tooltip‌ها را باید با jQuery مقداردهی اولیه کرد: عنصر خاصی را انتخاب کرده و متد tooltip() را فراخوانی می‌کنیم.

کد زیر همهٔ راهنماهای ابزار را در این مستند فعال می‌کند:

مثال

<script>
$(document).ready(function(){
  $('[data-toggle="tooltip"]').tooltip();
});
</script>


مشاهدهٔ نتیجه


مکان Tooltip

بطور پیش فرض، راهنمای ابزار در بالای عنصر ظاهر می‌شود.

از ویژگی data-placement برای تنظیم مکان Tooltip در سمت بالا، پایین، چپ یا راست عنصر استفاده کنید:

مثال

<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>


مشاهدهٔ نتیجه


نکته: همچنین می‌توان از ویژگی data-placement با مقدار “auto” استفاده کرد، که در این حالت مرورگر در مورد مکان Tooltip تصمیم می‌گیرد. برای مثال اگر مقدار آن “auto left” باشد، Tooltip در صورت امکان در سمت چپ ظاهر می‌شود، در غیر اینصورت در سمت راست.

مرجع کامل Tooltip بوت استرپ

برای دسترسی به مرجع همهٔ امکانات Carousel، متدها و رویدادها، به مرجع Tooltip JS بوت استرپ ما مراجعه کنید.

منابع آموزشی