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:

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

Tooltip using tooltipStateProps to set placement

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

Tooltip visible by start

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