Tooltips

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

On this page

Overview

  • Tooltips with zero-length titles are never displayed.
  • Triggering tooltips on hidden elements will not work.
  • When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your s to avoid this behavior.
  • Tooltips for disabled attribute must be triggered on a wrapper element.

Got all that? Great, let's see how they work with some examples.

Example: Enable tooltips everywhere

One way to initialize all tooltips on a page would be to select them by their toggle attribute:

Examples

Hover over the links below to see tooltips:

Placeholder text to demonstrate some inline links with tooltips. This is now just filler, no killer. Content placed here just to mimic the presence of real text . 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 these tooltips on links can work in practice, once you use them on your own site or project. test

vue

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

vue

With an SVG:

vue

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

Hover over me
vue

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 b-div or b-span component, ideally made keyboard-focusable using tabindex="0".

vue
On this page