Show compact context hints for controls and actions on hover or keyboard focus with Bootstrap's native tooltip plugin.
Use data-bs-toggle="tooltip" for brief, optional hints attached to a control that already has a visible purpose. Attach the tooltip to a focusable trigger, keep the content short, and choose placement from the surrounding layout so the hint does not cover the thing it explains.
data-bs-toggle="tooltip"
Initialize tooltips only on pages that use them; Bootstrap keeps them opt-in for performance and positions them with Popper. Use container="body" or another explicit container when the trigger sits inside complex layouts such as input groups, button groups, tables, or clipped containers.
container="body"
Keep essential instructions visible outside the tooltip for touch and assistive technology users. Tooltips with empty titles do not show, disabled elements need a wrapper trigger, HTML content is sanitized, and tooltips should be hidden before their trigger is removed from the DOM.
Use a focusable trigger for one-line operational context without opening modals.
1 2 3 4 5 6 7 8 9<a href="#!" class="tooltip-trigger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Workspace status is visible from the project settings panel." > Check sync status </a>
<a href="#!" class="tooltip-trigger" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Workspace status is visible from the project settings panel." > Check sync status </a>
Choose tooltip_placement for compact command bars and density-sensitive tooltips.
tooltip_placement
1 2 3 4 5 6<div class="d-flex flex-wrap gap-2"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens above" data-bs-placement="top">Top</button> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens to the right" data-bs-placement="right">Right</button> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens below" data-bs-placement="bottom">Bottom</button> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens to the left" data-bs-placement="left">Left</button> </div>
<div class="d-flex flex-wrap gap-2"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens above" data-bs-placement="top">Top</button> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens to the right" data-bs-placement="right">Right</button> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens below" data-bs-placement="bottom">Bottom</button> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Preview opens to the left" data-bs-placement="left">Left</button> </div>
Use compact shortcut badges in tooltip content and let Bootstrap sanitize the markup.
1 2 3 4 5 6 7<button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Save draft <kbd> ⌘S </kbd> " data-bs-placement="top" data-bs-html="true"> <i class="lucide lucide-save" data-icon="inline-start" aria-hidden="true"></i> Save draft </button>
<button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Save draft <kbd> ⌘S </kbd> " data-bs-placement="top" data-bs-html="true"> <i class="lucide lucide-save" data-icon="inline-start" aria-hidden="true"></i> Save draft </button>
A disabled element never fires hover or focus events, so wrap it in a focusable <span> and attach the tooltip there, per Bootstrap's own guidance.
disabled
<span>
1 2 3 4 5 6 7 8 9<span class="d-inline-block" role="button" tabindex="0" data-bs-toggle="tooltip" data-bs-title="This action is currently unavailable" > <button class="btn btn-outline-secondary" type="button" disabled>Archive</button> </span>
<span class="d-inline-block" role="button" tabindex="0" data-bs-toggle="tooltip" data-bs-title="This action is currently unavailable" > <button class="btn btn-outline-secondary" type="button" disabled>Archive</button> </span>
Keep the same action context while previewing in RTL locales.
1 2 3<div dir="rtl"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="تتبع حالة المشروع من هذه البطاقة." data-bs-placement="top">حالة المشروع</button> </div>
<div dir="rtl"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="تتبع حالة المشروع من هذه البطاقة." data-bs-placement="top">حالة المشروع</button> </div>
1 2 3<div dir="rtl"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="בדוק את סטטוס הפרויקט מאותה כרטיסייה." data-bs-placement="top">מצב הפרויקט</button> </div>
<div dir="rtl"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="בדוק את סטטוס הפרויקט מאותה כרטיסייה." data-bs-placement="top">מצב הפרויקט</button> </div>
1 2 3<div dir="ltr"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Check project status from this card." data-bs-placement="top">Project status</button> </div>
<div dir="ltr"> <button class="btn btn-outline-secondary" type="button" data-bs-toggle="tooltip" data-bs-title="Check project status from this card." data-bs-placement="top">Project status</button> </div>
For Bootstrap's Tooltip plugin options, positioning, and accessibility notes, see the Bootstrap Tooltips documentation.
No matching pages.
Restore the default appearance.