Documentation and examples for adding custom Bootstrap tooltips with CSS and JavaScript using CSS3 for animations and data-bs-attributes for local title storage.

Examples

Hover over the links below to see tooltips:

Hover over the buttons below to see the four tooltips directions:top,right,bottom,and left. Directions are mirrored when using Bootstrap in RTL.

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top </button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right </button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom </button><button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left </button>

And with custom HTML added:

<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>

Disabled elements

Elements with the disabledattribute 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-eventson the disabled element.

<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="Disabled tooltip"><button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button></span>