Components
Tooltip
Lightweight floating hint that appears on hover or focus.
Tooltip
A lightweight floating label that appears on hover or focus to provide additional context. Built on Base UI Tooltip with Motion animations.
Import
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipPortal, TooltipPositioner, TooltipPopup, TooltipArrow } from '@mks2508/mks-ui/react';Basic Usage
Wrap your app (or a section) with TooltipProvider:
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="outline">Hover me</Button>
</TooltipTrigger>
<TooltipPortal>
<TooltipPositioner sideOffset={4}>
<TooltipPopup>
<TooltipArrow />
Helpful tooltip text
</TooltipPopup>
</TooltipPositioner>
</TooltipPortal>
</Tooltip>
</TooltipProvider>Placement
The TooltipPositioner controls placement:
<TooltipPositioner side="right" align="center" sideOffset={8}>
<TooltipPopup>Appears to the right</TooltipPopup>
</TooltipPositioner>Cursor Following
The Tooltip can follow the cursor:
<Tooltip followCursor="x">
{/* Follows cursor horizontally */}
</Tooltip>
<Tooltip followCursor="y">
{/* Follows cursor vertically */}
</Tooltip>Provider Configuration
Configure defaults for all tooltips:
<TooltipProvider delay={200} closeDelay={100}>
{/* All nested tooltips inherit these defaults */}
</TooltipProvider>API Reference
| Component | Key Props | Description |
|---|---|---|
TooltipProvider | delay, skipDelay, closeDelay | Context provider |
Tooltip | open, onOpenChange, followCursor | Root per-tooltip |
TooltipTrigger | asChild | Trigger element |
TooltipPortal | — | Portal with AnimatePresence |
TooltipPositioner | side, align, sideOffset, alignOffset | Positioning wrapper |
TooltipPopup | slots, transition | Animated content |
TooltipArrow | slots | Arrow indicator |