Overlays
Tooltip
Radix-backed hover/focus label; wrap triggers in a TooltipProvider.
A small floating label that appears on hover or focus, built on Radix Tooltip. Wrap your trigger in a TooltipProvider (place one near the app root to share open/close timing), then pair a TooltipTrigger with a TooltipContent bubble.
Import
import {
TooltipProvider,
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@yuhuanowo/yunui";
Basic
Tooltip
Sides
TooltipContent accepts Radix's side (top / right / bottom / left) and sideOffset props to control where the bubble appears.
Placed on the right
Parts
| Part | Role |
|---|---|
TooltipProvider | Shares open/close timing; place once near the app root (accepts delayDuration). |
Tooltip | Root; pairs a trigger with its content. |
TooltipTrigger | Element that shows the tooltip on hover/focus (use asChild to wrap a Button). |
TooltipContent | The floating bubble; accepts side and sideOffset. |
Tooltip re-exports Radix Tooltip parts with design-system styling. See the Radix Tooltip docs for the complete prop reference.