Tooltips should be supplementary popups that provide non-essential clarity in high-density UIs. A user should not miss critical information if they never see a tooltip.
See Alternatives to Tooltips for guidance on what pattern is more appropriate.
import { Button, Tooltip } from '@mylighthouse/prism-react';
export default function BasicExample(): React.JSX.Element {
return (
<>
<Tooltip>
<Tooltip.Trigger
render={(props) => (
<Button {...props} buttonType="secondary">
Top
</Button>
)}
/>
<Tooltip.Content side="top">
<strong style={{ fontWeight: 700 }}>Bold title</strong>
<p>More detail here</p>
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger
render={(props) => (
<Button {...props} buttonType="secondary">
Right
</Button>
)}
/>
<Tooltip.Content side="right">Tooltip content</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger
render={(props) => (
<Button {...props} buttonType="secondary">
Bottom
</Button>
)}
/>
<Tooltip.Content side="bottom">Tooltip content</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger
render={(props) => (
<Button {...props} buttonType="secondary">
Left
</Button>
)}
/>
<Tooltip.Content side="left">Tooltip content</Tooltip.Content>
</Tooltip>
</>
);
}
API Reference
Tooltip
| Name | Default | Type | Description |
onOpenChange | -- | (open: boolean, eventDetails: TooltipRootChangeEventDetails) => void | -- |
open | -- | boolean | -- |
Tooltip.Content
| Name | Default | Type | Description |
side | -- | Side | -- |
Tooltip.Trigger
| Name | Default | Type | Description |
render * | -- | (props: HTMLProps) => ReactElement<unknown, string | JSXElementConstructor<any>> | Renders the trigger element. You must spread the `props` argument onto
your element so that base-ui can wire up ARIA attributes, focus handlers,
and keyboard interactions. |