Tooltip
ExperimentalAdd brief supplemental text on hover or focus.
Example
Hover or focus Help. Escape dismisses the tooltip.
Tab to explore focus and keyboard behavior.
example.tsx
'use client'; import 'panel-ui-kit/styles.css';import { PanelUiTheme } from 'panel-ui-kit/theme';import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from 'panel-ui-kit/tooltip';import { Button } from 'panel-ui-kit/button'; export function Example() { return ( <PanelUiTheme theme="neutral" motion={{"mode":"full","durationScale":1,"intensity":1}}> <TooltipProvider> <Tooltip> <TooltipTrigger asChild><Button variant="outline">Help</Button></TooltipTrigger> <TooltipContent>Find help for this action.</TooltipContent> </Tooltip> </TooltipProvider> </PanelUiTheme> );}When to use
Keep the trigger independently named. Never put interactive content, required instructions or critical errors in a tooltip.
Keyboard
Focus reveals the text; Escape dismisses it. The tooltip has no tab stop.
Properties
| Property | Values | Default |
|---|---|---|
delayDuration | Provider/Root milliseconds | Radix default |
side | Radix placement on Content | top |
motion | full · reduced · off · object | Inherited |