Skip to contentWolf-Rayet

Tooltip

A tooltip is a short label that appears over the page to explain a control.

#Default

Hover or focus the control to see its tooltip.

import { Button, Tooltip } from '@wolf-rayet/react';

<Tooltip content="Assign to the next available rep">
  <Button>Assign</Button>
</Tooltip>

#On an icon button

Always give an icon button a tooltip as well as a label.

import { IconButton, Tooltip } from '@wolf-rayet/react';

<Tooltip content="What routing means">
  <IconButton icon={<Info />} label="What routing means" appearance="subtle" />
</Tooltip>

#Position

Put the tooltip above when there is no room below.

import { Button, Tooltip } from '@wolf-rayet/react';

<Tooltip content="Above the control" position="top">
  <Button>Hover me</Button>
</Tooltip>