Tooltip
Tooltip is an interactive component that displays information when hovering over an element.
pnpm dlx dreamy add tooltipBase usage of a Tooltip.
Hover me
<Tooltip content="I am visible on hover">
<Text>Hover me</Text>
</Tooltip>You can control the open and close delay of the tooltip by using the openDelay and closeDelay props.
Hover me (1s open)
Hover me (1s close)
<Tooltip content="I am visible on hover after 1000 miliseconds" openDelay={1000}>
<Text>Hover me (1s open)</Text>
</Tooltip>
<Tooltip content="I am closed after 1000 miliseconds" closeDelay={1000}>
<Text>Hover me (1s close)</Text>
</Tooltip>You can control the close behavior of the tooltip by using the closeOnClick, closeOnPointerDown, closeOnEsc, and closeOnScroll props.
By default, the tooltip will close on click, pointer down, esc key, but not on scroll.
Close on click false
Close on pointer down false
Close on esc key false
Close on scroll
<Tooltip content="I am not closed on click" closeOnClick={false}>
<Text>Close on click false</Text>
</Tooltip>
<Tooltip content="I am not closed on pointer down" closeOnPointerDown={false}>
<Text>Close on pointer down false</Text>
</Tooltip>
<Tooltip content="I am not closed on esc key" closeOnEsc={false}>
<Text>Close on esc key false</Text>
</Tooltip>
<Tooltip content="I am closed on scroll" closeOnScroll>
<Text>Close on scroll</Text>
</Tooltip>You can control the arrow of the tooltip by using the hasArrow and arrowSize props.
No arrow
Arrow size 15
<Tooltip content="I have no arrow" hasArrow={false}>
<Text>No arrow</Text>
</Tooltip>
<Tooltip content="I have an arrow" arrowSize={15}>
<Text>Arrow size 15</Text>
</Tooltip>In some cases you might want to disable the portal and render the tooltip directly in the parent component.
You may use it in a sticky header for example, as with portal, the tooltip will look weird.
Disable portal
<Tooltip content="I am rendered directly in the parent component" disablePortal>
<Text>Disable portal</Text>
</Tooltip>