Tooltips

Things to know when using the tooltip plugin:

• Tooltips rely on the 3rd party library Popper for positioning. You must include popper.min.js before materialstyle.min.js in order for tooltips to work!

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

Placement

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

With custom HTML

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>

Javascript

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
  return new materialstyle.Tooltip(tooltipTriggerEl)
})

With jQuery

$('[data-bs-toggle="tooltip"]').tooltip();