Components›Tooltip
Overlays

Tooltip

Reveal supplementary information on hover or focus without navigating away.

Design question

Which direction should a tooltip expand when the baseline is vertical?

Placement comparison

1글씨를 세로로 쓰는 것을 세로쓰기라 한다
2전통적으로 한국어와 중국어가 세로로 쓰였다
3죽간을 쓰던 때부터 세로로 써 왔다

Hover a verse reference. Tooltip is vertical — it matches the reading axis it annotates.

tsx
1function Tooltip({ children, content, placement = "left" }) {
2 const [visible, setVisible] = useState(false)
3
4 const positionStyle = {
5 left: {
6 right: "calc(100% + 10px)",
7 top: "50%",
8 transform: "translateY(-50%)",

Guidance

Do
  • ✓Default to left placement — tooltip appears in the direction reader came from
  • ✓Keep tooltip width ≤ 240px
  • ✓Dismiss on Escape and pointer leave with 200ms delay
Don't
  • ✗Place tooltips below vertical text triggers — they interrupt the column below
  • ✗Use tooltips for interactive content
  • ✗Animate tooltips on the reading axis

Accessibility

role='tooltip'. aria-describedby on trigger. Not used for required information. Keyboard accessible via focus.

Open Question

When a vertical column is at the leftmost edge of the viewport, where does a left-placed tooltip go? Smart collision detection for vertical baselines is unsolved.

← PreviousHyperlink TreatmentNext →Sheet