Skip to content
OverlayBrowse overlay components
ComponentsOverlayStable

Tooltip

Brief hover label with rotated arrow on every side.

Live preview

Tooltip topTooltip rightTooltip bottom

Usage

Adapters:React stableVue stable
index.html
<span class="lm-tooltip">
  <button aria-describedby="tip-1">?</button>
  <span class="lm-tooltip-content" id="tip-1">Help text</span>
</span>

CSS classes (2)

ClassDescription
lm-tooltipInline-flex anchor
lm-tooltip-contentFloating content (data-side='top|right|bottom|left')

React props (2)

PropTypeDefaultDescription
sidetop | right | bottom | lefttop—
delaynumber300—

Accessibility

  • Use aria-describedby to link tooltip id.
  • Show on hover AND focus; dismiss on Escape.

Spotted something wrong? Edit this entry on GitHub.