Tooltip

Auto-initialising tooltips via data attributes. Converts native title attributes, supports positioning, and refreshes dynamically added elements.

Data Attribute Tooltips

On Icons & Badges

Pending

Native Title Conversion

Elements with a title attribute are automatically converted to Manhattan tooltips.

// Add tooltips via data attributes (no PHP helper needed)
<button data-m-tooltip="Tooltip text" data-m-tooltip-position="top">
    Hover me
</button>

// Alternative syntax
<span data-tooltip="Also works">Alt syntax</span>

// On any element
<i class="fas fa-info-circle" data-m-tooltip="More info"></i>

// Disable tooltip on an element
<button data-m-tooltip="Hidden" data-m-tooltip-disabled="1">
    No tooltip
</button>

// Native title conversion (automatic)
<button title="Hello">Auto-converted</button>

// Refresh tooltips (after dynamic DOM changes)
m.tooltip.refresh();

// Refresh within a specific container
m.tooltip.refresh(document.getElementById('myContainer'));

// Programmatically show/hide
m.tooltip.show(element);
m.tooltip.hide();

JS Data Attributes

Method / Property	Parameters	Description
`data-m-tooltip`	`string`	Tooltip text to display.
`data-tooltip`	`string`	Alternative attribute name (same behaviour).
`data-m-tooltip-position`	`string`	Position: `top` (default), `right`, `bottom`, `left`.
`data-m-tooltip-disabled`	`"1"`	Disable the tooltip for this element.
`title`	`string`	Automatically converted to a Manhattan tooltip (native title removed).

JS JS Methods

Method / Property	Parameters	Description
`m.tooltip.refresh(root)`	`?HTMLElement`	Re-scan for tooltip elements. Call after adding new DOM nodes. Defaults to `document`.
`m.tooltip.show(element)`	`HTMLElement`	Show the tooltip for the given element.
`m.tooltip.hide()`		Hide the currently visible tooltip.