The mod.tooltip() method automatically attaches event listeners for all elements with the data-mod-tooltip attribute on the page and handles hover interactions to show/hide tooltips.
Method API
// Using mod(-plus).iife.min.js
window.mod.tooltip();
// Using mod(-plus).esm.min.js
import { tooltip } from 'path/to/mod(-plus).esm.min.js';
tooltip();Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Tooltip HTML
<!-- On hover, "Changes are permanent" will be displayed above the button. -->
<button data-mod-tooltip="Changes are permanent" class="mod-button mod-button-success">Save Changes</button>Tooltip JavaScript
window.mod.tooltip();To use tooltips, simply add the data-mod-tooltip attribute to any element with the text you want to display. No additional CSS classes are required on the target element.