راهنمای ابزار (Tooltip)
«راهنمای ابزار (Tooltip)» یک کادر کوچک توضیح است. وقتی ماوس روی عنصر می رود، ظاهر می شود. «کامپوننت (Component)» یعنی بخش آماده رابط کاربر. مثل برچسب کوچک روی دکمه در یک بازی.
ساخت Tooltip پایه
برای ساخت، ویژگی data-bs-toggle="tooltip" را به عنصر بده. سپس متن را در ویژگی title بنویس.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">
Hover over me!
</button>
راه اندازی با جاوااسکریپت
Tooltip بدون «راه اندازی (Initialize)» کار نمی کند. کد زیر همه Tooltipها را فعال می کند.
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
<\/script>
نکته: متن Tooltip از title خوانده می شود. بنابراین، عنوان کوتاه و واضح بنویس.
تعیین موقعیت Tooltip
پیش فرض، Tooltip بالای عنصر است. با data-bs-placement آن را top، bottom، left یا right کن.
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!">
Hover
</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hooray!">
Hover
</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Hooray!">
Hover
</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">
Hover
</a>
گام های عملی سریع
- روی عنصر،
data-bs-toggle="tooltip"بگذار. - متن کوتاه را در
titleبنویس. - کد راه اندازی جاوااسکریپت را اجرا کن.
- در صورت نیاز،
data-bs-placementرا تنظیم کن.
جمع بندی سریع
- Tooltip توضیح کوتاه روی عناصر است.
- با
titleمتن را مشخص کن. - حتماً با JS آن را فعال کن.
- جهت را با
data-bs-placementعوض کن.
مطالب مرتبط: مودال (Modal)، پاپ اور (Popover).