Tooltip

Tooltips display additional information when users hover over or focus on an element.

Installation

npm install @libretexts/davis-react

Basic Usage

import { Tooltip, Button } from '@libretexts/davis-react';

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

When to use

• Tooltip — Use for brief, text-only supplementary information that appears on hover or focus. Must not contain interactive elements (links, buttons). Ideal for icon button labels and truncated text.
• Popover — Use when the floating content needs to be interactive (forms, action lists, date pickers) or requires click-to-open behavior. Popover traps focus and stays open until explicitly dismissed.