راهنمای ابزار
مثال هایی برای افزودن راهنمای ابزار بوت استرپ سفارشی با CSS و جاوااسکریپت با استفاده از CSS3 برای انیمیشن و ویژگی های داده.
مثال ها
برای مشاهده راهنمای ابزار، نشانگر ماوس را روی دکمه زیر نگه دارید.
مثال کد
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="راهنمای ابزار سمت چپ"> راهنمای ابزار سمت چپ </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="راهنمای ابزار بالا"> راهنمای ابزار بالا </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="راهنمای ابزار پایین"> راهنمای ابزار پایین </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="راهنمای ابزار سمت راست"> راهنمای ابزار سمت راست </button>
عناصر غیرفعال
عناصر با ویژگی disabled تعاملی نیستند، به این معنی که کاربران نمی توانند برای راه اندازی یک راهنمای ابزار (یا پاپ اور) روی آن ها فوکوس کنند، ماوس را نگه دارند یا کلیک کنند. به عنوان یک راه حل، می خواهید راهنمای ابزار را از یک پوشش دهنده div یا span فعال کنید و pointer-events را در عنصر غیرفعال بازنشانی کنید.
مثال کد
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="راهنمای ابزار غیرفعال"> <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>دکمه غیرفعال</button> </span>
