Tooltip

Hairline Tooltip - Expands Dense Labels On Hover And Focus

01 Preview

02 Usage

Hairline tooltip for expanding dense labels and abbreviations - the spec-sheet shorthand this kit is full of (REV. A, EST. 6 MIN, ORCID). Shows on hover and on keyboard focus; no positioning JS.

<Tooltip label="Estimated reading time">
  <SpecLabel>EST. 6 MIN</SpecLabel>
</Tooltip>

<Tooltip label="Open in a new tab" side="right">
  <Button size="sm" glyph="↗">GitHub</Button>
</Tooltip>

side: top | bottom | left | right. Wrap a focusable trigger (button, link) so the tip appears on keyboard focus as well as hover; the bubble is wired to it with aria-describedby.

03 Props

Prop	Type	Default	Notes
label*	`React.ReactNode`	—	The tip text shown on hover/focus. Required — a tooltip with nothing to say is nothing.
side	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`	Which side of the trigger the bubble sits on.
children*	`React.ReactNode`	—	The trigger. A focusable element (button, link) gets the tip on keyboard focus too.

Also accepts every attribute of React.HTMLAttributes<HTMLSpanElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Tooltip } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';