Tooltip Directions
Tooltip example are available with following options, Directions are mirrored when using Bootstrap in 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>Tooltip with HTML
When you hover over the button labeled "Tooltip with HTML," a tooltip will appear displaying formatted text. The tooltip's content includes HTML elements such as italic, underlined, and bold text. The `data-bs-html="true"` attribute allows the tooltip to render HTML tags correctly.
<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>Custom Tooltips
You can customize the appearance of tooltips using CSS variables. We set a custom class with data-bs-custom-class="custom-tooltip" to scope our custom appearance and use it to override a local CSS variable.
<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>Disabled elements
Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using 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>Tooltips on links
This is sample text intended to showcase some inline links with tooltips. Currently, it serves as placeholder content—essentially filler—meant to illustrate how real text might be represented. By viewing this example, you should get a clear idea of how tooltips on links function in practice. This will help you understand how they can be effectively used on your own site or project.
<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>Colored Tooltips
Use the data-bs-custom-class="tooltip-*" attribute to apply a custom tooltip style with a primary color theme. This allows you to customize the appearance of the tooltip, giving it a distinct look that matches the primary color scheme of your application.
<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>