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.

This component requires Javascript for initialization. Click to view Javascript.

Placement

html

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

html

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

html

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

html

<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

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();

CONTENTS