title: "Tooltip" slug: "/packages/tooltip" category: "overlay" componentNames:

• "Tooltip"

Tooltip

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

import Tooltip from "@ds-kit/tooltip"

Basic Example

A basic example of an Tooltip component can look like this:

<Tooltip title="Tooltip">
  <Button variant="primary">Reference</Button>
</Tooltip>

Tooltip using tooltipStateProps to set placement

<Tooltip title="Custom very-very-very long popover text" placement="auto-end">
  <Button variant="primary">Reference</Button>
</Tooltip>

Tooltip visible by start

<Tooltip title="Custom very-very-very long popover text" visible={true}>
  <Button variant="primary">Reference</Button>
</Tooltip>