Overlays Tooltip

Tooltip

A word of help on hover or focus — for icon buttons above all.

Preview

Usage

tsx

import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, Button, HeartIcon } from "zostel-ui";

<TooltipProvider>
  <Tooltip>
    <TooltipTrigger asChild>
      <Button variant="outline" size="icon" aria-label="Save"><HeartIcon size={16} /></Button>
    </TooltipTrigger>
    <TooltipContent><p>Save</p></TooltipContent>
  </Tooltip>
</TooltipProvider>

Parts

Prop	Type	Default	Description
`TooltipProvider`	`{ delayDuration? }`	—	Wrap the app (or the part with tooltips) once; delay defaults to 700 ms.
`TooltipContent`	`{ side?, sideOffset? }`	—	Steel Grey, with Beige words (7.97:1) and a 1 px edge, above everything (z 95); sideOffset defaults to 4.

TooltipProvider

Type: { delayDuration? }

Default: —

Wrap the app (or the part with tooltips) once; delay defaults to 700 ms.

TooltipContent

Type: { side?, sideOffset? }

Default: —

Steel Grey, with Beige words (7.97:1) and a 1 px edge, above everything (z 95); sideOffset defaults to 4.