Skip to main content

Tooltip

Display additional context when users hover or focus an element.

http://localhost:3000
<Tooltip title="This is a tooltip">
  <Button>Hover Me</Button>
</Tooltip>

Usage​

Placement​

Set the placement prop on tooltip to adjust the placement of tooltip in relation to the trigger element.

http://localhost:3000
<Tooltip placement="right" title="This is a tooltip">
  <Button>Hover Me</Button>
</Tooltip>

Delay​

The delay in which the tooltip displays can be adjusted with the delay prop.

http://localhost:3000
<Tooltip delay={500} title="This is a tooltip">
  <Button>Hover Me</Button>
</Tooltip>

Controlled​

The pagination's state can be controlled using the isOpen and onOpenChange props.

http://localhost:3000
function Controlled() {
  const [open, setOpen] = React.useState(false);

  return (
    <Tooltip isOpen={open} onOpenChange={setOpen} title="Tooltip">
      <Button>Controlled</Button>
    </Tooltip>
  );
}

Props​

as?The root element to be rendered