Tooltip

Lightweight tooltips that can be positioned around any element and styled using semantic color variations.

Positions

Tooltips can be aligned on the top, bottom, left, or right of the target element.

<button class="btn primary" data-tooltip="true" data-tooltip-message="Top!" data-tooltip-position="top">Top</button>
<button class="btn primary" data-tooltip="true" data-tooltip-message="Left!" data-tooltip-position="left">Left</button>
<button class="btn primary" data-tooltip="true" data-tooltip-message="Bottom!" data-tooltip-position="bottom">Bottom</button>
<button class="btn primary" data-tooltip="true" data-tooltip-message="Right!" data-tooltip-position="right">Right</button>

Colored Tooltips

Tooltips can be styled with color modifiers using the data-tooltip-class attribute.

<!-- Use data-tooltip-class attribute to assign color subclasses -->
<button class="btn primary" data-tooltip="true" data-tooltip-message="Text..." data-tooltip-class="primary">Primary</button>
<button class="btn success" data-tooltip="true" data-tooltip-message="Text..." data-tooltip-class="success">Success</button>
<button class="btn warning" data-tooltip="true" data-tooltip-message="Text..." data-tooltip-class="warning">Warning</button>
<button class="btn alert"   data-tooltip="true" data-tooltip-message="Text..." data-tooltip-class="alert">Alert</button>
<button class="btn info"    data-tooltip="true" data-tooltip-message="Text..." data-tooltip-class="info">Info</button>

Configuration Attributes

Add data-tooltip="true" to register a tooltip.
Use data-tooltip-message to specify the tooltip text content.
Set data-tooltip-position to top, bottom, left, or right. Defaults to top.
Add data-tooltip-class to append styling classes (e.g. primary, success, warning, alert, info) to the generated tooltip element.

HTML Tooltips

By default, tooltips escape HTML to prevent layout errors. You can enable HTML rendering by setting the data-tooltip-html="true" attribute. This allows you to embed formatting tags (such as bold headings, line breaks, or styling spans).

<!-- Set data-tooltip-html="true" and configure HTML content -->
<button class="btn primary" 
        data-tooltip="true" 
        data-tooltip-html="true" 
        data-tooltip-message="<b>User Profile</b><br><span style='font-size: 11px;'>Role: Developer</span>">
    Rich HTML Tooltip
</button>