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.

Overview

Things to know when using the tooltip plugin:

Tooltips rely on the third-party library Popper for positioning.
Tooltips with a zero-length <desc> element are never displayed.
Triggering tooltips on hidden elements will not work.
Tooltips for @outputclass="disabled" elements must be triggered on a wrapper element.
Tooltips must be hidden before their corresponding elements have been removed from the DOM.
Tooltips can be triggered thanks to an element inside a shadow DOM.
Tooltips are included by default, but for performance reasons, you may exclude them yourself by setting --popovers.include=no.

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.

To enable tooltips, add @output-class="tooltip-*" to the enclosing <xref>. The direction of the tooltip is appended to the @output-class.

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

<xref href="#" outputclass="btn-secondary tooltip-top">
  <desc>Tooltip on top</desc>
  Tooltip on top
</xref>
<xref href="#" outputclass="btn-secondary tooltip-right">
  <desc>Tooltip on right</desc>
  Tooltip on right
</xref>
<xref href="#" outputclass="btn-secondary tooltip-bottom">
  <desc>Tooltip on bottom</desc>
  Tooltip on bottom
</xref>
<xref href="#" outputclass="btn-secondary tooltip-left">
  <desc>Tooltip on left</desc>
  Tooltip on left
</xref>

Custom HTML can be added to tooltips using additional DITA elements within the <desc>

<xref href="#" outputclass="btn-secondary tooltip-top">
  <desc><b>Tooltip</b> <u>with</u> <b>DITA</b> elements</desc>
  Tooltip with embedded DITA
</xref>

Custom tooltips

You can customize the appearance of tooltips using CSS variables. We set a custom class with <data name="class">custom-tooltip<data> to scope our custom appearance and use it to override a local CSS variable.

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-primary);
}

<xref href="#" outputclass="btn-secondary tooltip-top">
  <data name="class">custom-tooltip</data>
  <desc>This top tooltip is themed via CSS variables.</desc>
  Custom tooltip
</xref>