React Tooltip & Popover
Tooltip shows a short phrase on hover and keyboard focus (with an open delay so it never flickers); Popover opens on click for rich content — the demo's spec-preview card is the pattern for part numbers in catalogs and tables. Both close on Escape, sit on the solid popover surface, and position on any side without a portal.
Tj = 105 °C
Installation
npx shadcn@latest add "http://localhost:3000/registry/tooltip.json"
Usage
Loading...
Props
Tooltip
| Prop | Type | Default | Description |
|---|---|---|---|
| content | React.ReactNode | — | Tooltip body (keep it short) |
| side | 'top' \ | 'bottom' \ | 'left' \ |
| delay | number | 300 | Open delay in ms |
Popover
| Prop | Type | Default | Description |
|---|---|---|---|
| trigger | React.ReactNode | — | Toggle element (wrapped in a button) |
| side | 'top' \ | 'bottom' \ | 'left' \ |
| panelClassName | string | 'w-72' | Panel sizing utilities |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.