Tooltips
Examples
Hover over the links below to see tooltips.
Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table Photo booth beard seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.
<p class="muted mb-0">
Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">you probably</a> haven't heard
of them. Photo booth beard raw denim letterpress vegan messenger bag
stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa
8-bit american apparel <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">have a</a> terry richardson
vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan
chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">whatever
</a> keytar, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">twitter handle</a> freegan cred
raw denim single-origin coffee viral.
</p>
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", and override the
pointer-events on the disabled element.
<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" data-bs-title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
Four Directions
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">Tooltip on right</button>
HTML Tags
And with custom HTML added:
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip"
data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
Color Tooltips
We set a custom class with ex. data-bs-custom-class="primary-tooltip" to scope our background-color primary appearance and use
it to override a local CSS
variable.
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="primary-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Primary tooltip
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="danger-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Danger tooltip
</button>
<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="info-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Info tooltip
</button>
<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-custom-class="success-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
Success tooltip
</button>