Tooltips

2.0.2

CSS-only, data-driven tooltip system requiring zero JavaScript.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-tooltips.min.css">

Data Attributes

Attribute	Default	Description
`data-ax-tooltip`	None	The text content of the tooltip.
`data-ax-tooltip-position`	top	Position: top, bottom, left, right.
`data-ax-tooltip-multiline`	false	Enables wrapping for long text.

💡 Implementation Notes

• Does not work on void elements (input, img) without a wrapper.
• Positions are logical and adapt to RTL automatically.

Live Examples

Multi-position Showcase

Demonstrating top, right, and bottom positioning using data attributes.

Preview: Multi-position Showcase

Source Code

html

<div class="ax-flex ax-gap-6 ax-p-8 ax-flex-wrap ax-justify-center">
  <button class="ax-btn ax-btn--sm ax-btn--primary" data-ax-tooltip="Default top tooltip">Top View</button>
  <button class="ax-btn ax-btn--sm" data-ax-tooltip="Right positioned tooltip" data-ax-tooltip-position="right">Right View</button>
  <button class="ax-btn ax-btn--sm" data-ax-tooltip="This is a multiline tooltip that wraps automatically when enabled." data-ax-tooltip-position="bottom" data-ax-tooltip-multiline="true">Bottom Multiline</button>
</div>

♿ Accessibility Guidelines

•Visible on both :hover and :focus
•Ensure description is also in aria-label if needed

Module Evolution

Version	Type	Description
v2.0.1	Feature	Switched to Logical Positioning with physical fallbacks.

← Previous

Modals