Overview
Initializes Bootstrap tooltips on all matching elements within a container. Useful for dynamically added elements where Bootstrap's automatic tooltip initialization hasn't run. Automatically finds elements with
data-bs-toggle="tooltip" and creates tooltip instances.Signature
initTooltip(element: string | HTMLElement, tooltipSelector?: string): bootstrap.Tooltip[]
| Parameter | Type | Default | Description |
|---|---|---|---|
element |
string | HTMLElement |
- | CSS selector string or HTMLElement. |
tooltipSelector |
string |
'[data-bs-toggle="tooltip"]' |
Selector for elements to initialize tooltips on. |
Returns:
bootstrap.Tooltip[] — Array of Bootstrap Tooltip instances.Example
Hover over the buttons below to see the tooltips.
<div id="tooltipContainer" class="d-flex gap-3">
<button type="button" class="btn btn-primary"
data-bs-toggle="tooltip" data-bs-placement="top"
title="Tooltip on top">Top</button>
<button type="button" class="btn btn-success"
data-bs-toggle="tooltip" data-bs-placement="right"
title="Tooltip on right">Right</button>
<button type="button" class="btn btn-warning"
data-bs-toggle="tooltip" data-bs-placement="bottom"
title="Tooltip on bottom">Bottom</button>
<button type="button" class="btn btn-danger"
data-bs-toggle="tooltip" data-bs-placement="left"
title="Tooltip on left">Left</button>
</div>
import {initializers} from 'metronic-extension';
const {initTooltip} = initializers;
// Initialize all tooltips in the container
const tooltips = initTooltip('#tooltipContainer');