Tooltip

Usage

import { HoverTip, HoverTipGroup } from '@wdzyi/ui';

<HoverTipGroup>
  <HoverTip label='Move' shortcut='V'>
    <button aria-label='Move'><MoveIcon /></button>
  </HoverTip>
  <HoverTip label='Frame' shortcut='F'>
    <button aria-label='Frame'><FrameIcon /></button>
  </HoverTip>
</HoverTipGroup>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

labelstring

What it says.

shortcutstring

A key to show beside it, in mono.

side'top' | 'bottom' = 'top'

The side it prefers. It takes the other when there’s no room.

openboolean

Holds it up without the pointer, such as for a tour. Hover and focus still work.

childrenReactNode

The one element it describes, such as an icon button.

delaynumber = 500

On HoverTipGroup: how long the first one waits, in ms.

Notes

• The first tip waits 500ms. While one is up, the next comes at once: the same tip slides over in 220ms and eases to the new word’s width, while the old word fades.
• Leaving puts it away with no fade. It waits 80ms first, so crossing the gap between two buttons doesn’t count, and coming back within 300ms skips the wait.
• Keyboard focus shows it straight away, and on a touch screen a finger held for 450ms shows it until it lifts, without pressing the button. A press puts it away until the pointer leaves, and Escape hides it.
• It wraps its child in a span with no box of its own, so the layout doesn’t change, and adds itself to the child’s aria-describedby while it’s up. A tip outside a group makes a group of one.
• With reduced motion, it appears and moves without sliding.