MENU


Tooltip

A tooltip is a message displayed beside an element as the mouse pointer moves (ie. hovers) over the element.To display a Bootstrap tooltip, you must make the following initialization at the end of the HTML page:

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
An advantage of using a Bootstrap tooltip over using an ordinary HTML tooltip is that the former recognizes HTML markup.
RESETRUNFULL
<!DOCTYPE html><html>
<head><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor' crossorigin='anonymous'>
      <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js' integrity='sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2' crossorigin='anonymous'></script>
      <style>div:not(.container):not(.tooltip):not(.tooltip *):not(.navbar *):not(.carousel-caption):not(.card *):not(.form-check):not(.input-group) { border:1px solid grey; text-align:center; }</style>
</head><body>

    <div class="container mt-3">
      <br/><br/>
      <a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="Hooray!">Top</a>
      <a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Hooray!">Bottom</a>
      <a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="Hooray!">Left</a>
      <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Hooray!">Right</a>
      <a href="#" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b> on right">HTML</a>
      <br/><br/>
    </div>
    <script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
    </script>

</body><html>

Above, we have seen two attributes that control the Bootstrap tooltips -- data-bs-placement and data-bs-html. There are other possible options:
animation: Apply a CSS fade transition. Defaults to 'true'.
container: Attach the tooltip to a specific element. Defaults to 'false'. Eg. "data-container: 'body' "
delay: Delay showing/hiding of the tooltip. Defaults to '0'. Eg. delay: { "show": 500, "hide": 100 }.
html: Recognize HTML markup in the tooltip. Defaults to 'false'.
placement: Place the tooltip on one of the four sides. Defaults to 'top'.
selector: Delegate the tooltip to the specified targets. Defaults to 'false'.
template: Base the tooltip on the specified HTML. Defaults to
      '<div class="tooltip" role="tooltip">
      <div class="arrow">
      <div class="tooltip-inner">'.
title: Set the default title value if the 'title' attribute is not present. Defaults to ''.
trigger: Specify how a tooltip is triggered -- hover | click | focus | manual. You may separate multiple triggers with space. Defaults to 'hover focus'.
offset: Set the offset of the tooltip relative to its target. Defaults to '0'.
fallbackPlacement: Specify which placement to use on fallback. Defaults to 'flip'.
boundary: Constrain the boundary -- viewport, window, scrollParent. Defaults to 'scrollParent'.
sanitize: Activate sanitization with the options 'template' and 'title'? Defaults to 'true'.
allowList: Specify the object which contains allowed attributes and tags.
sanitizeFn: Specify a custom sanitization function.
popperConfig: To change Bootstrap's default Popper.js config, see Popper.js's configuration.

You can programmatically trigger a tooltip with JavaScript:

var exampleEl = document.getElementById('example'); var tooltip = new bootstrap.Tooltip(exampleEl, options); // tooltip.show(); // tooltip.hide(); // tooltip.toggle(); // tooltip.dispose(); // tooltip.enable(); // tooltip.disable(); // tooltip.toggleEnabled(); // tooltip.update();

You can attach event handlers to Bootstrap tooltips:

var myTooltipE = document.getElementById('myTooltip'); var tooltip = new bootstrap.Tooltip(myTooltipE); myTooltipE.addEventListener('hidden.bs.tooltip', function(){ // do something...}); tooltip.hide(); /* Other events include: show.bs.tooltip shown.bs.tooltip hide.bs.tooltip hidden.bs.tooltip inserted.bs.tooltip */

Tooltips for .disabled or disabled elements must be triggered on a wrapper element containing the individual element.