Tooltip

Accessible popup shown on hover/focus. Compose the styled popup parts with a raw base-ui Provider/Root for custom delay or trigger logic.

Sides

import { Button } from "@brijbyte/agentic-ui/button";
import { Tooltip } from "@brijbyte/agentic-ui/tooltip";

import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/tooltip.css";

export default function SidesDemo() {
  return (
    <>
      {(["top", "right", "bottom", "left"] as const).map((side) => (
        <Tooltip key={side} content={`Appears on ${side}`} side={side}>
          <Button variant="outline" size="sm">
            {side.charAt(0).toUpperCase() + side.slice(1)}
          </Button>
        </Tooltip>
      ))}
    </>
  );
}

Rich content

import { Button } from "@brijbyte/agentic-ui/button";
import { Tooltip } from "@brijbyte/agentic-ui/tooltip";

import "@brijbyte/agentic-ui/button.css";
import "@brijbyte/agentic-ui/tooltip.css";

export default function RichDemo() {
  return (
    <Tooltip
      content={
        <span>
          Keyboard shortcut:{" "}
          <kbd
            style={{
              fontFamily: "var(--font-mono)",
              fontSize: "var(--font-size-xs)",
              border: "1px solid var(--color-line)",
              borderRadius: "var(--radius-sm)",
              padding: "0 4px",
              background: "var(--color-surface-3)",
            }}
          >
            ⌘K
          </kbd>
        </span>
      }
    >
      <Button variant="ghost" size="sm">
        Command palette
      </Button>
    </Tooltip>
  );
}

Composed: base-ui Provider + styled parts

import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
import { Button } from "@brijbyte/agentic-ui/button";
import { TooltipPositioner, TooltipPopup, TooltipArrow } from "@brijbyte/agentic-ui/tooltip";

import "@brijbyte/agentic-ui/tooltip.css";
import "@brijbyte/agentic-ui/button.css";

export default function ComposedDemo() {
  return (
    <BaseTooltip.Provider delay={300}>
      <BaseTooltip.Root>
        <BaseTooltip.Trigger
          render={
            <Button variant="outline" size="sm">
              Hover me
            </Button>
          }
        />
        <BaseTooltip.Portal>
          <TooltipPositioner side="top" sideOffset={6}>
            <TooltipPopup>
              <TooltipArrow />
              Custom delay via Provider
            </TooltipPopup>
          </TooltipPositioner>
        </BaseTooltip.Portal>
      </BaseTooltip.Root>
    </BaseTooltip.Provider>
  );
}

API Reference

base-ui docs ↗

Accessible popup shown on hover or focus. Automatically positions itself
with an arrow and supports configurable delay, side, and alignment.

Prop	Type	Default
content*	`ReactNode`	—
Text or rich content shown inside the tooltip popup.
children*	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	—
The element that triggers the tooltip on hover/focus.
delay	`number`	`400`
Hover delay in milliseconds before the tooltip appears.
side	`"top" \| "bottom" \| "left" \| "right"`	`top`
Which side of the trigger the tooltip appears on.
align	`"start" \| "center" \| "end"`	`center`
Alignment along the side axis.

Styled Parts

base-ui docs ↗

Pre-styled wrappers around the corresponding base-ui parts. All base-ui props are forwarded.

CSS Class Names

Available as keys on the TooltipStyles object. Each key maps to a hashed CSS module class name at runtime.

arrowpopuppositioner