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>
  );
}