Skip to main content

Tooltip


Example

<Tooltip
content="Tooltip message"
trigger={(ref, props) => (
<Box ref={ref} {...props} display="inline-block">
<IconWarningSolid size={16} />
</Box>
)}
/>

Props

NameTypeDefault ValueRequiredDescription
contentChildrenYes
trigger(ref: Ref<HTMLElement>, props: Omit<HTMLAttributes<HTMLElement>, "color">) => ElementYes

The trigger element that will be used to open the menu. It must accept a ref prop and other accessibility props to ensure the menu is properly connected to its trigger, for accessibility purposes.

It can use the state parameter to determine and change the menu state.

placement"bottom" | "left" | "right" | "top" | "bottom-end" | "bottom-start" | "left-end" | "left-start" | "right-end" | "right-start" | "top-end" | "top-start"No