Tooltip

Displays additional information on hover or focus.

import { Tooltip } from 'ui-lab-components/tooltip';
Delay (ms)200
import { Button } from 'ui-lab-components/button';
import { Tooltip } from 'ui-lab-components/tooltip';
 
export default function Example() {
  return (
    <div className="flex justify-center p-8">
      <Tooltip content="Click to perform action" delay={200}>
        <Button>Hover me</Button>
      </Tooltip>
    </div>
  );
}

tooltip/01-basic-tooltip

A simple tooltip that appears on hover. Hover over the button to see the tooltip with helpful information.

Loading interactive preview
import { Tooltip } from 'ui-lab-components/tooltip';
 
export default function Example() {
  return (
    <Tooltip content="This is a helpful tooltip">
      <button>Hover me</button>
    </Tooltip>
  );
}