Tooltip
A lightweight tooltip with 6 visual variants, optional arrow, configurable placement and delay.
Import
import { Tooltip } from "@igorao79/uivix";Playground
200ms
All Variants
All Sides
Usage
<Tooltip content="Save changes" side="bottom" variant="gradient" arrow>
<Button>Save</Button>
</Tooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | - | Tooltip content to display |
| variant | "default" | "dark" | "light" | "gradient" | "glass" | "outlined" | "default" | Visual style variant of the tooltip |
| side | "top" | "bottom" | "left" | "right" | "top" | Side of the trigger to show the tooltip |
| arrow | boolean | true | Whether to show an arrow pointing to the trigger |
| delay | number | 200 | Delay in ms before showing the tooltip |
| children | ReactNode | - | Trigger element |
| className | string | - | Additional CSS classes for the tooltip |