Tooltips

Helpful hints on hover

Basic Usage

P/E Ratio

<Tooltip>
  <Tooltip.Trigger>
    <Button variant="secondary">Hover me</Button>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <Tooltip.Arrow />
    This is a helpful tooltip
  </Tooltip.Content>
</Tooltip>

Financial Terms

Tooltips are useful for explaining financial terminology.

<Tooltip>
  <Tooltip.Trigger>
    <span className="cursor-help underline decoration-dotted">P/E Ratio</span>
  </Tooltip.Trigger>
  <Tooltip.Content>
    <Tooltip.Arrow />
    Price-to-Earnings ratio: stock price divided by earnings per share
  </Tooltip.Content>
</Tooltip>

Loading States

Spinners and skeletons for loading UI

Popovers

Rich content overlays

On this page

Basic Usage Financial Terms