Tooltip

A Tooltip is a small, non-interactive overlay that displays brief informational text when hovering over or focusing on an element. It is built on top of the Popover component.

Key Characteristics

• Hover-Triggered: Automatically shows on hover with configurable delay.
• Non-Interactive: Unlike Popover, tooltips are meant for displaying simple text hints, not interactive content. Still it's possible to interact with the tooltip content if/when needed via hoverableContent prop.
• Accessible: Works with keyboard focus and follows accessibility best practices.

Import

import { Tooltip } from '@andrejground/lab';

Usage

Preview

Code

import { Tooltip } from '@andrejground/lab';

export default function App() {
  return (
    <Tooltip content="This is a tooltip">
      <button>Hover me</button>
    </Tooltip>
  );
}

Placement

Preview

Code

import { Tooltip, type TooltipPlacement } from '@andrejground/lab';

const PLACEMENTS: TooltipPlacement[] = [
  'top-start',
  'top-center',
  'top-end',
  'bottom-start',
  'bottom-center',
  'bottom-end',
  'right-start',
  'right-center',
  'right-end',
  'left-start',
  'left-center',
  'left-end',
];

export default function App() {
  return (
    <>
      {PLACEMENTS.map((placement) => (
        <Tooltip key={placement} content={placement} placement={placement}>
          <button>{placement}</button>
        </Tooltip>
      ))}
    </>
  );
}

Delay Show

Control the delay before showing the tooltip with delayShow prop.

Preview

Code

import { Tooltip } from '@andrejground/lab';

const DELAYS = [0, 300, 500, 1000];

export default function App() {
  return (
    <>
      {DELAYS.map((delay) => (
        <Tooltip key={delay} content={`Delay: ${delay}ms`} delayShow={delay}>
          <button>{delay}ms delay</button>
        </Tooltip>
      ))}
    </>
  );
}

Delay Hide

Control the delay before hiding the tooltip with delayHide prop.

Preview

Code

import { Tooltip } from '@andrejground/lab';

const DELAYS = [0, 300, 500, 1000];

export default function App() {
  return (
    <>
      {DELAYS.map((delay) => (
        <Tooltip key={delay} content={`Delay: ${delay}ms`} delayHide={delay}>
          <button>{delay}ms delay</button>
        </Tooltip>
      ))}
    </>
  );
}

Hoverable Content

Use hoverableContent prop to keep the tooltip visible when hovering over the tooltip content.

Preview

Code

import { Tooltip } from '@andrejground/lab';

export default function App() {
  return (
    <Tooltip
      content={
        <span>
          Hover over me! I stay visible while you interact with this content.
        </span>
      }
      hoverableContent
    >
      <button>Hover me</button>
    </Tooltip>
  );
}

Controlled

Preview

Open: false

Code

import React from 'react';
import { Tooltip } from '@andrejground/lab';

export default function App() {
  const [isOpen, setIsOpen] = React.useState(false);

  return (
    <>
      <Tooltip
        content="Controlled tooltip"
        isOpen={isOpen}
        onOpenChange={setIsOpen}
      >
        <button>Hover me</button>
      </Tooltip>

      <br />

      <div>
        Open: <code>{`${isOpen}`}</code>
      </div>
    </>
  );
}