راهنمای ابزار

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

نحوه ایجاد Tooltip

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

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

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

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

مثال

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


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


مکان Tooltipها

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

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

مثال

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


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


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

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


منابع آموزشی