Tooltips

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

Example

Enable tooltips

As mentioned above, you must initialize tooltips before they can be used. One way to initialize all tooltips on a page would be to select them by their data-bs-toggle attribute, like so:

Tooltips on links

Hover over the links below to see tooltips:

<p class="muted">Placeholder text to demonstrate some <a href="#" data-bs-toggle="tooltip" data-bs-title="Default tooltip">inline links</a> with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of <a href="#" data-bs-toggle="tooltip" data-bs-title="Another tooltip">real text</a>. And all that just to give you an idea of how tooltips would look when used in real-world situations. So hopefully you've now seen how <a href="#" data-bs-toggle="tooltip" data-bs-title="Another one here too">these tooltips on links</a> can work in practice, once you use them on <a href="#" data-bs-toggle="tooltip" data-bs-title="The last tip!">your own</a> site or project.</p>

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.

.custom-tooltip { --bs-tooltip-bg: var(--bd-violet-bg); --bs-tooltip-color: var(--bs-white); }
<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>

Directions

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" data-bs-title="Tooltip on top"> Tooltip on top </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right"> Tooltip on right </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom"> Tooltip on bottom </button> <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-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" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>"> Tooltip with HTML </button>

With an SVG:

CSS

Variables

As part of Bootstrap’s evolving CSS variables approach, tooltips now use local CSS variables on .tooltip for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--#{$prefix}tooltip-zindex: #{$zindex-tooltip}; --#{$prefix}tooltip-max-width: #{$tooltip-max-width}; --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x}; --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y}; --#{$prefix}tooltip-margin: #{$tooltip-margin}; @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size); --#{$prefix}tooltip-color: #{$tooltip-color}; --#{$prefix}tooltip-bg: #{$tooltip-bg}; --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; --#{$prefix}tooltip-opacity: #{$tooltip-opacity}; --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width}; --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};

Sass variables

$tooltip-font-size: $font-size-sm; $tooltip-max-width: 200px; $tooltip-color: var(--#{$prefix}body-bg); $tooltip-bg: var(--#{$prefix}emphasis-color); $tooltip-border-radius: var(--#{$prefix}border-radius); $tooltip-opacity: .9; $tooltip-padding-y: $spacer * .25; $tooltip-padding-x: $spacer * .5; $tooltip-margin: null; // TODO: remove this in v6 $tooltip-arrow-width: .8rem; $tooltip-arrow-height: .4rem; // fusv-disable $tooltip-arrow-color: null; // Deprecated in Bootstrap 5.2.0 for CSS variables // fusv-enable

Usage

The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element. Trigger the tooltip via JavaScript:

const exampleEl = document.getElementById('example') const tooltip = new bootstrap.Tooltip(exampleEl, options)

Markup

The required markup for a tooltip is only a data attribute and title on the HTML element you wish to have a tooltip. The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).

<!-- HTML to write --> <a href="#" data-bs-toggle="tooltip" data-bs-title="Some tooltip text!">Hover over me</a> <!-- Generated markup by the plugin --> <div class="tooltip bs-tooltip-auto" role="tooltip"> <div class="tooltip-arrow"></div> <div class="tooltip-inner"> Some tooltip text! </div> </div>

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>

Options

As options can be passed via data attributes or JavaScript, you can append an option name to data-bs-, as in data-bs-animation="{value}". Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-bs-custom-class="beautifier" instead of data-bs-customClass="beautifier".

As of Bootstrap 5.2.0, all components support an experimental reserved data attribute data-bs-config that can house simple component configuration as a JSON string. When an element has data-bs-config='{"delay":0, "title":123}' and data-bs-title="456" attributes, the final title value will be 456 and the separate data attributes will override values given on data-bs-config. In addition, existing data attributes are able to house JSON values like data-bs-delay='{"show":0,"hide":150}'.

The final configuration object is the merged result of data-bs-config, data-bs-, and js object where the latest given key-value overrides the others.

Using function with popperConfig

const tooltip = new bootstrap.Tooltip(element, { popperConfig(defaultBsPopperConfig) { // const newPopperConfig = {...} // use defaultBsPopperConfig if needed... // return newPopperConfig } })

Methods

const tooltip = bootstrap.Tooltip.getInstance('#example') // Returns a Bootstrap tooltip instance // setContent example tooltip.setContent({ '.tooltip-inner': 'another title' })

Events

const myTooltipEl = document.getElementById('myTooltip') const tooltip = bootstrap.Tooltip.getOrCreateInstance(myTooltipEl) myTooltipEl.addEventListener('hidden.bs.tooltip', () => { // do something... }) tooltip.hide()