Tooltip

Basic usage

Opens on hover and on keyboard focus; closes on Escape (headless behavior).

tsx

import { Tooltip } from "~/components/ui/base/tooltip";

<Tooltip.Root>
  <Tooltip.Trigger>Hover or focus</Tooltip.Trigger>
  <Tooltip.Panel>Short hint for the element.</Tooltip.Panel>
</Tooltip.Root>

Placement

The placement prop on the root matches Floating UI (defaults to top ).

tsx

import { Tooltip } from "~/components/ui/base/tooltip";

<Tooltip.Root placement="bottom">
  <Tooltip.Trigger>Panel below</Tooltip.Trigger>
  <Tooltip.Panel>Placement via the placement prop (as in headless).</Tooltip.Panel>
</Tooltip.Root>

Delay

The delayDuration prop (ms) — a delay before opening, useful for a dense interface.

tsx

import { Tooltip } from "~/components/ui/base/tooltip";

<Tooltip.Root delayDuration={400}>
  <Tooltip.Trigger>400 ms delay</Tooltip.Trigger>
  <Tooltip.Panel>Opens only after the delay — useful for a dense interface.</Tooltip.Panel>
</Tooltip.Root>

Arrow (optional)

Tooltip.Arrow follows the actual panel position (even after a flip while scrolling) — just add it to the panel and add padding on the relevant side.

tsx

import { Tooltip } from "~/components/ui/base/tooltip";

<div class="flex flex-wrap gap-6">
  <Tooltip.Root placement="top">
    <Tooltip.Trigger>Top</Tooltip.Trigger>
    <Tooltip.Panel class="pb-2">
      <Tooltip.Arrow />
      The arrow follows the panel.
    </Tooltip.Panel>
  </Tooltip.Root>
  <Tooltip.Root placement="bottom">
    <Tooltip.Trigger>Bottom</Tooltip.Trigger>
    <Tooltip.Panel class="pt-2">
      <Tooltip.Arrow />
      Panel below.
    </Tooltip.Panel>
  </Tooltip.Root>
  <Tooltip.Root placement="right">
    <Tooltip.Trigger>Right</Tooltip.Trigger>
    <Tooltip.Panel class="pl-2">
      <Tooltip.Arrow />
      Panel on the right.
    </Tooltip.Panel>
  </Tooltip.Root>
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/tooltip/meta.generated.json not found or path not allowed.