Tooltip

Pure-CSS tooltip (Material's plain Tooltip): any element with a data-tooltip attribute grows a positioned label on hover/focus-visible — no elements, no JS. Position with .tooltip-bottom/.tooltip-left/.tooltip-right (default: above). For rich tooltips (title + body + action), compose a small [popover] panel on the .dropdown-menu skin with an interestfor trigger instead.

Root: [data-tooltip]

Example

Example
<button class="btn btn-icon" aria-label="Assign to me" data-tooltip="Assign to me">@</button>

Contract

Variants & modifiers

ClassAxisRules
tooltip-bottompositionoptional · exclusive
tooltip-leftpositionoptional · exclusive
tooltip-rightpositionoptional · exclusive
tooltip-bottommodifieroptional
tooltip-leftmodifieroptional
tooltip-rightmodifieroptional

Accessibility

The tooltip text is CSS content, invisible to assistive tech — data-tooltip must NEVER be the only label. Pair it with a real accessible name (aria-label or visible text): the tooltip is a visual reinforcement, not the name. It shows on :focus-visible as well as hover, and disappears for touch-only users — never put essential information here.

Nesting

Allowed in:

  • any focusable or hoverable element