تخطَّ إلى المحتوى

Tooltip

هذا المحتوى غير متوفر بلغتك بعد.

A tooltip names an icon-only control or adds a few words to a label. It never holds interactive content and never carries information that is needed to complete a task, because touch users do not see it.

Read from the component manifest, so this is the component’s own contract. See Overlays for layers, stacking and dismissal shared by all layers.

Stagebeta
Keyboard
  • Focus on the trigger shows the tip
  • Escape dismisses it and focus stays on the trigger
Dismissal
  • escape: yes
  • outside press: moves away
  • close button: none
StackingNever inside a modal's focus trap as the only carrier of information; sits above every layer (z-tooltip).
Accessibility
  • Opens on focus as well as hover and closes on Escape; touch devices do not show tooltips, so the trigger needs its own accessible name. The tip stays open while the pointer is on it (WCAG 1.4.13). Help that a touch or screen-reader user needs belongs in a Toggletip, not here.
PatternAPG: tooltip
DocsStorybook
Stagebeta
Accessibility
  • Timing only; it changes nothing for keyboard focus or screen readers.
DocsStorybook
المسؤول
Okrado founders
آخر تحديث
تُراجَع قبل