Tooltip
Tooltips are a small informative pop-ups that appear when an item is being hovered, focused or touched. It implements WAI-ARIA Tooltip Pattern.
Examples
String label
You can pass a string to the label property.
<Tooltip label="Tooltip Label" placement="right">
<Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>
Component Label
You can also pass a custom component to the label property.
<Tooltip
label={
<Stack>
<Text variant="small" tone="info">
Previous Order: 102183 (211-213)
</Text>
<Tag palette="green" label="Ready for Handling" size="small" />
<Text variant="small">João da Silva</Text>
<Text variant="small">49,00 BRL</Text>
</Stack>
}
>
<Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>
Initially visible
You can use the visible property to set the initial visibility of the tooltip.
<Tooltip label="Tooltip Label" visible placement="right">
<Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>
Placement
You can use the placement property to change the position that the Tooltip popup will appears.
<Tooltip label="Tooltip Label" placement="right">
<Button icon={<IconCopySimple />} variant="tertiary" />
</Tooltip>
Custom Component
When using the Tooltip with a custom component, you must provide a ref for the Popup to work. You can easily do this using the React.forwardRef.
import React, { Ref, forwardRef } from '@vtex/admin-ui'
import { Tooltip } from '@vtex/admin-ui'
const CustomIcon = forwardRef((props, ref: Ref<SVGSVGElement>) => {
return (
<svg {...props} ref={ref}>
...
</svg>
)
})
function Example() {
return (
<Tooltip label="Tooltip Label" placement="right">
<CustomIcon />
</Tooltip>
)
}