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 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" id="tooltip-container">
Tight pants next level keffiyeh <a href="#" data-bs-container="#tooltip-container" data-bs-toggle="tooltip" 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-container="#tooltip-container" data-bs-toggle="tooltip" 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-container="#tooltip-container" data-bs-toggle="tooltip" title="Another one here too">whatever
</a> keytar, scenester farm-to-table banksy Austin <a href="#" data-bs-container="#tooltip-container" data-bs-toggle="tooltip" 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.
<div id="tooltip-container1">
<span class="d-inline-block" tabindex="0" data-bs-container="#tooltip-container1" data-bs-toggle="tooltip" title="Disabled tooltip">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>
</div>
Four Directions
Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.
<div id="tooltip-container2">
<button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-info" data-bs-container="#tooltip-container2" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
HTML Tags
And with custom HTML added:
<div id="tooltip-container3">
<button type="button" class="btn btn-secondary" data-bs-container="#tooltip-container3" data-bs-toggle="tooltip"
data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
</div>