The <Tooltip /> component displays a small pop-up that display additional information when hovered or focused.

import { Tooltip } from 'minerva-ui';


<Tooltip label="Tooltip text">
  <Button>Hover me!</Button>
</Tooltip>
<Tooltip label="Tooltip text">
  <Button>Hover me!</Button>
</Tooltip>

Tooltip with Custom Position


<Tooltip label="Tooltip text" placement="right">
  <Button variant="primary">Hover me!</Button>
</Tooltip>
<Tooltip label="Tooltip text" placement="right">
  <Button variant="primary">Hover me!</Button>
</Tooltip>

Tooltip with Custom Styles

import { Tooltip } from 'minerva-ui';


<Tooltip label="Tooltip text" bg="indigo.700" borderRadius="full">
  <Button variant="primary">Hover me!</Button>
</Tooltip>
<Tooltip label="Tooltip text" bg="indigo.700" borderRadius="full">
  <Button variant="primary">Hover me!</Button>
</Tooltip>

Props

Name	Type	Is Required	Default	Description
`label`	`string`	optional	`null`	Text to display in tooltip
`position`	`top`, `right`, `bottom`, `left`	optional	`bottom`	Text to display in tooltip

Tooltip with Custom Position

Tooltip with Custom Styles

Props#

Props