Tooltip
Tooltip shows brief supplementary information when people hover or focus an element.
Icon-only Buttons in particular need one. Wrap the app in <TooltipProvider> once, at the root.
Import
Install from npm, copy the source into your project with @yugen-ui/cli or the shadcn CLI, or import directly when working in this repo.
TSX
// npm install yugen-uiimport { SimpleTooltip, Tooltip, TooltipTrigger, TooltipContent } from "yugen-ui";Variants
Each tile is a standalone example: hover to copy, or press Code to see the source.
Placement
side: top (default), right, bottom, left.
No arrow
withArrow={false} when the tooltip sits right next to a small element.
Usage
Do
- Keep tooltip content short, one sentence at most.
- Always add a tooltip to icon-only Buttons.
Don't
- Don't put links or buttons in a tooltip. Use Popover.
- Don't put important information only in a tooltip.
Props
| Prop · Type | Default | Description |
|---|---|---|
| contentReactNode | Default: — | (SimpleTooltip) Content. |
| appearance"normal" | "inverted" | Default: "normal" | Light background or inverted colors. |
| side"top" | "right" | "bottom" | "left" | Default: "top" | Position relative to the trigger. |
| withArrowboolean | Default: true | Shows the arrow. |
| material"glass" | "glass-clear" | Default: — | Yugen Labs — a glass tooltip. |