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