Overview

Initialize tooltips for dynamically added elements using Bootstrap Tooltips.

Reference

Parameters:
  • element: string|HTMLElement|JQuery
    HTMLElement selector, element, or JQuery object.
  • tooltipSelector?: string
    Selector for the element that initializes the tooltip. Default is '[data-bs-toggle="tooltip"]'.
Return:
  • bootstrap.Tooltip[] List of bootstrap.Tooltip instances created when the element's tooltip is initialized.

Basic

Initializes tooltips for elements under the specified element.
              <button type="button" class="btn btn-primary m-1" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-primary m-1" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Tooltip on right</button>
<button type="button" class="btn btn-primary m-1" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-primary m-1" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-primary m-1" data-bs-toggle="tooltip" data-bs-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">Tooltip with HTML</button>
            
              import {components} from 'metronic-extension';

// Initialize the component and set up event listeners.
components.initTooltip(document.body);