UI Lab | Tooltip

Tooltip

Displays additional information on hover or focus.

import { Tooltip } from "ui-lab-components";
import { Button } from "ui-lab-components";
 
export function Example() {
  return (
    <Tooltip content="Click to perform action">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Position

Delay (ms)

Basic Tooltip

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

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