Tooltip - Dreamy UI

Tooltip

Tooltip is an interactive component that displays information when hovering over an element.

#

Import

Tooltip - The Tooltip component.

import { Tooltip } from "@dreamy-ui/react";

#

Usage

Base usage of a Tooltip.

Hover me

<Tooltip content="I am visible on hover">
    <Text>Hover me</Text>
</Tooltip>

#

Open and close delay

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>

#

Close handlers

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>

#

Arrow

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>