Tooltips

Vue Bootstrap 5 Tooltip component

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

Note: Read the API tab to find all available options and advanced customization

Basic example

Hover the link to see the tooltip

Show code

Overview

Things to know when using the tooltip plugin:

  • Tooltips with zero-length tip slot values are never displayed.
  • Triggering tooltips on hidden elements will not work.
  • Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
  • When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your #reference slot content to avoid this behavior.
  • 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.

Four directions

Four options are available: top, right, bottom, and left aligned for direction property.

Show code

And with custom HTML added:

Show code

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.

Show code