Tooltip

Displays additional information on hover or focus.

Position

Delay (ms)

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

tooltip/01-tooltip-basic-tooltip

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

import { Tooltip } from 'ui-lab-components/tooltip';
 
export const metadata = {
  title: 'Basic Tooltip',
  description: 'A simple tooltip that appears on hover. Hover over the button to see the tooltip with helpful information.'
};
 
export default function Example() {
  return (
    <Tooltip content="This is a helpful tooltip">
      <button>Hover me</button>
    </Tooltip>
  );
}