Tooltip

A short hint on hover and on keyboard focus.

tooltip.example.svelte

<script lang="ts">
  import { IconButton, Tooltip } from '@onlywin/ui-svelte';
</script>

<div class="example-row">
  <Tooltip content="Return to player, certified">
    <button class="example-term" type="button">RTP</button>
  </Tooltip>
  <Tooltip content="Download the report" placement="bottom">
    <IconButton icon="download" label="Download" variant="ghost" />
  </Tooltip>
</div>

Usage

Do

Use it to name icon buttons and to explain a term.

Don’t

Do not put links or buttons in it; use Popover.

Accessibility

The trigger gets aria-describedby pointing at the tooltip; it shows on hover after 300 ms and on focus at once.

Keyboard

Tooltip keyboard interactions
Keys	Action
`Focus the trigger`	Show
`Escape`	Hide

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Tooltip props
Prop	Type	Default	Description
`children` *required	`Snippet`	—	The trigger: one focusable element (a button, a link). It gets `aria-describedby`.
`content` *required	`string`	—
`placement`	`'bottom' \| 'left' \| 'right' \| 'top'`	`'top'`