Displays informative text when users hover an element.
View source code
<Tooltip content="This is some useful information in a tooltip" triggerAsChild>
<Button variant="primaryBrand" text="Top tooltip" />
</Tooltip>
Use the placement prop to specify where the tooltip should be positioned.
<>
<Tooltip
content="This is some useful information in a tooltip"
placement="top"
triggerAsChild
>
<Button variant="primaryBrand" isDisabled text="Top tooltip" />
</Tooltip>
<Tooltip
content="This is some useful information in a tooltip"
placement="bottom"
triggerAsChild
>
<Button variant="primaryBrand" isDisabled text="Bottom tooltip" />
</Tooltip>
<Tooltip
content="This is some useful information in a tooltip"
placement="left"
triggerAsChild
>
<Button variant="primaryBrand" isDisabled text="Left tooltip" />
</Tooltip>
<Tooltip
content="This is some useful information in a tooltip"
placement="right"
triggerAsChild
>
<Button variant="primaryBrand" isDisabled text="Right tooltip" />
</Tooltip>
</>
If the isDisabled prop is set to true, the tooltip will never appear.
<Tooltip content="This is some useful information in a tooltip" isDisabled>
<Button variant="primaryBrand" isDisabled text="Tooltip" />
</Tooltip>
The tooltip can be controlled using the isOpen prop.
const Demo = () => {
const [isVisible, setIsVisible] = useState(false);
return (
<Tooltip content="Copied" isOpen={isVisible} triggerAsChild>
<Button
variant="primaryBrand"
text="Click to copy"
onClick={() => {
setIsVisible(true);
setTimeout(() => {
setIsVisible(false);
}, 2000);
}}
/>
</Tooltip>
);
};
To use any component as the trigger (the component around which the tooltip will go), a div is added around it.
To avoid having this div around the trigger (this can be useful for ellipsis for example), you can use the triggerAsChild prop to do so. This will remove the div but you will need to add forwardRef to your custom component.
At least the Grapes Button, Icon, IconButton, and HighlightIcon components have a forwardRef, and this will be added to more components in the future.