Tooltip

Organism

Hover ve focus ile görünür yardım metni. role="tooltip" + aria-describedby bağlantısı ile erişilebilir. 4 yön desteklenir.

Props EditorInteractive

Content

Placement

Theme

Arrow

<Tooltip content="Helpful tooltip text">
  <Button variant="outline">Hover me</Button>
</Tooltip>

Preview

Code

<Tooltip content="Help text" placement="top">
  <Button variant="outline" size="sm">Hover me</Button>
</Tooltip>

Preview

Code

<Tooltip content="Dark theme" theme="dark"><Button>Dark</Button></Tooltip>

Preview

Code

<Tooltip content="With arrow" arrow placement="top">
  <Button>Arrow</Button>
</Tooltip>
<Tooltip content="500ms delay" delay={500}>
  <Button>Delayed</Button>
</Tooltip>

Tooltip

Placements

Themes

Arrow + Delay

Navigation