انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
راهنمای راهنمای ابزار
نمونه راهنمای ابزار با گزینههای زیر موجود است، هنگام استفاده از Bootstrap در RTL، دستورالعملها منعکس میشوند.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-white" data-bs-placement="top" data-bs-title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-white" data-bs-placement="right" data-bs-title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-white" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-white" data-bs-placement="left" data-bs-title="Tooltip on left">
Tooltip on left
</button>راهنمای ابزار با HTML
هنگامی که ماوس را روی دکمه با عنوان "Tooltip with HTML" نگه می دارید، یک راهنمای ابزار ظاهر می شود که متن فرمت شده را نمایش می دهد. محتوای راهنمای ابزار شامل عناصر HTML مانند مورب, زیر خط کشیده شد، و پررنگ متن را `data-bs-html="true"` ویژگی به راهنمای ابزار اجازه می دهد تا تگ های HTML را به درستی ارائه دهد.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>نکات ابزار سفارشی
شما می توانید ظاهر نکات ابزار را با استفاده از متغیرهای CSS سفارشی کنید. ما یک کلاس سفارشی با data-bs-custom-class="custom-tooltip" تا نمای سفارشی خود را محدود کنیم و از آن برای نادیده گرفتن یک متغیر CSS محلی استفاده کنیم.
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="custom-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Custom tooltip
</button>عناصر غیر فعال
عناصر با از کار افتاده است ویژگی تعاملی نیست، به این معنی که کاربران نمیتوانند برای راهاندازی یک راهنمای ابزار (یا پاپ اور) روی آنها تمرکز کنند، ماوس را نگه دارند یا کلیک کنند. به عنوان یک راه حل، شما می خواهید راهنمای ابزار را از یک بسته بندی فعال کنید <div> or <span>، به طور ایده آل با استفاده از صفحه کلید قابل تمرکز است tabindex="0"
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>نکات ابزار در پیوندها
این متن نمونه ای است که برای نمایش برخی از آنها در نظر گرفته شده است لینک های درون خطیبا نکات ابزار در حال حاضر، به عنوان محتوای نگهدارنده مکان عمل می کند - اساساً پرکننده - برای نشان دادن چگونگی متن واقعیممکن است نمایندگی شود. با مشاهده این مثال، باید ایده روشنی از چگونگی آن به دست آورید نکات ابزار در پیوندهاعملکرد در عمل این به شما کمک می کند تا درک کنید که چگونه می توان از آنها به طور موثر استفاده کرد مال خودت سایت یا پروژه
<p class="text-muted mb-0">This is sample text intended to showcase some
<a href="#" data-bs-toggle="tooltip" data-bs-title="Tooltip for inline links">inline links</a>
with tooltips. Currently, it serves as placeholder content—essentially filler—meant to illustrate how
<a href="#" data-bs-toggle="tooltip" data-bs-title="Tooltip for real text">real text</a>
might be represented. By viewing this example, you should get a clear idea of how
<a href="#" data-bs-toggle="tooltip" data-bs-title="Tooltip for tooltips on links">tooltips on links</a>
function in practice. This will help you understand how they can be effectively used on
<a href="#" data-bs-toggle="tooltip" data-bs-title="Tooltip for your own site">your own</a> site or project.
</p>راهنمای ابزار رنگی
استفاده کنید data-bs-custom-class="tooltip-*" ویژگی برای اعمال یک سبک راهنمای سفارشی با یک تم رنگ اصلی. این به شما امکان می دهد ظاهر راهنمای ابزار را سفارشی کنید و ظاهری متمایز به آن می دهد که با طرح رنگ اصلی برنامه شما مطابقت دارد.
<button type="button" class="btn btn-primary" data-bs-custom-class="tooltip-primary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Primary Tooltip
</button>
<button type="button" class="btn btn-secondary" data-bs-custom-class="tooltip-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Secondary Tooltip
</button>
<button type="button" class="btn btn-success" data-bs-custom-class="tooltip-success" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Success Tooltip
</button>
<button type="button" class="btn btn-info" data-bs-custom-class="tooltip-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Info Tooltip
</button>
<button type="button" class="btn btn-warning" data-bs-custom-class="tooltip-warning" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Warning Tooltip
</button>
<button type="button" class="btn btn-danger" data-bs-custom-class="tooltip-danger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Danger Tooltip
</button>
<button type="button" class="btn btn-light" data-bs-custom-class="tooltip-light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Light Tooltip
</button>
<button type="button" class="btn btn-dark" data-bs-custom-class="tooltip-dark" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Dark Tooltip
</button>