ElyriTooltip
Tooltips that follow hover or focus, position themselves automatically and flip when space runs out.
Installation
Add component
pnpm dlx @elyri/cli@latest add tooltipExamples
Placements
The four preferred sides: top / bottom / left / right.
import { Tooltip } from './components/elyri/Tooltip';
export function Example() {
return (
<div className="demo-ui-row">
<Tooltip placement="top">
<Tooltip.Trigger>top</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
<Tooltip placement="bottom">
<Tooltip.Trigger>bottom</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
<Tooltip placement="left">
<Tooltip.Trigger>left</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
<Tooltip placement="right">
<Tooltip.Trigger>right</Tooltip.Trigger>
<Tooltip.Content>Short, non-interactive hint</Tooltip.Content>
</Tooltip>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Initial open state when uncontrolled |
onOpenChange | (open: boolean) => void | — | Called whenever the open state changes |
delay | number | 200 | Hover delay in milliseconds; focus opens it immediately |
placement | 'top' | 'bottom' | 'left' | 'right' | 'top' | Preferred side: top / bottom / left / right |
align | 'start' | 'center' | 'end' | 'center' | Cross-axis alignment: start / center / end |
offset | number | 8 | Distance from the trigger |
Tooltip.Trigger | ButtonHTMLAttributes | — | The trigger button that handles hover and focus |
Tooltip.Content | HTMLAttributes | — | The tooltip content, role="tooltip", non-interactive |