Tooltips

Bootstrap 5 Tooltip component

Bootstrap Tooltip displays informative text when users hover, focus, or tap an element. They display text tips next to the element in question.

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

Required ES init: Tooltip *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

Hover over the links below to see tooltips.

Hover the link to see the tooltip

Show code

Overview

Things to know when using the tooltip plugin:

  • Tooltips are opt-in for performance reasons, so you must initialize them yourself.
  • Tooltips with zero-length titles are never displayed.
  • Specify container: 'body' to avoid rendering problems in more complex components (like our input groups, button groups, etc).
  • 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 <a>s 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

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

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