Tooltip

Tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Tooltip is based on Ariakit Tooltip component.

Simple API

For basic usage Tooltip is a good choice. Use a single child as reference and the prop tooltip to specify the content of the tooltip.

import { Button } from "swash/Button";
import { Tooltip } from "swash/Tooltip";

() => (
    <Tooltip tooltip="Tooltip">
        <Button>Reference</Button>
    </Tooltip>
);

You can also use a react element as tooltip content.

import { Button } from "swash/Button";
import { Tooltip } from "swash/Tooltip";
import { AlertBubbleOutline } from "swash/Icon";

() => (
    <Tooltip
    tooltip={
        <div className="flex items-center">
          <AlertBubbleOutline /> Hello world
        </div>
      }>
        <Button>Reference</Button>
    </Tooltip>
);

Customization

Placement

Use placement prop to specify the position of the tooltip. The default value is bottom. If you want to learn more about the placement options, please refer to FloatingUI Placements.

import { Button } from "swash/Button";
import { Tooltip } from "swash/Tooltip";

() => (
    <Tooltip tooltip="Tooltip" placement="top">
        <Button>Reference</Button>
    </Tooltip>
);

Delay

Use delay prop to specify the delay before the tooltip appears. The default value is 0. Delay is in ms.

import { Button } from "swash/Button";
import { Tooltip } from "swash/Tooltip";

() => (
    <Tooltip tooltip="Tooltip" delay={2000}>
        <Button>Reference</Button>
    </Tooltip>
);

Gutter

Use gutter prop to specify the distance between the reference and the tooltip. The default value is 0. Gutter is in px.

import { Button } from "swash/Button";
import { Tooltip } from "swash/Tooltip";

() => (
    <Tooltip tooltip="Tooltip" gutter={220}>
        <Button>Reference</Button>
    </Tooltip>
);

Nude tooltip

Add nude property to Tooltip to display an unstyled tooltip.

import { Button } from "swash/Button";
import { Tooltip } from "swash/Tooltip";

() => (
    <Tooltip tooltip="Tooltip" nude>
        <Button>Reference</Button>
    </Tooltip>
);