Tooltip

TS

import { … } from "@fungi.computer/caps/components/tooltip";

Hero

TSX

import { IconButton } from "@fungi.computer/caps/components/icon-button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@fungi.computer/caps/components/tooltip";

const basket = (
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor">
    <path d="M2 6h12l-1.5 7h-9L2 6Z" strokeWidth="1.5" />
    <path d="M5 6l1-3h4l1 3" strokeWidth="1.5" />
  </svg>
);
const map = (
  <svg viewBox="0 0 16 16" fill="none" stroke="currentColor">
    <path d="M2 4l4-1 4 1 4-1v9l-4 1-4-1-4 1V4Z" strokeWidth="1.5" />
    <path d="M6 3v9M10 4v9" strokeWidth="1.5" />
  </svg>
);

export default function Hero() {
  return (
    <div className="flex gap-xs">
      <Tooltip>
        <TooltipTrigger asChild>
          <IconButton aria-label="Basket" icon={basket} />
        </TooltipTrigger>
        <TooltipContent>Your basket</TooltipContent>
      </Tooltip>
      <Tooltip>
        <TooltipTrigger asChild>
          <IconButton aria-label="Map" icon={map} />
        </TooltipTrigger>
        <TooltipContent>Patch map</TooltipContent>
      </Tooltip>
    </div>
  );
}

Sides

TSX

import { Button } from "@fungi.computer/caps/components/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
  type TooltipSide,
} from "@fungi.computer/caps/components/tooltip";

const sides: readonly TooltipSide[] = ["top", "right", "bottom", "left"];

export default function Sides() {
  return (
    <div className="flex flex-wrap gap-lg p-xl">
      {sides.map((side) => (
        <Tooltip key={side} side={side}>
          <TooltipTrigger asChild>
            <Button variant="outline" size="sm">
              {side}
            </Button>
          </TooltipTrigger>
          <TooltipContent>Opens {side}</TooltipContent>
        </Tooltip>
      ))}
    </div>
  );
}

Controlled

TSX

import { Button } from "@fungi.computer/caps/components/button";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@fungi.computer/caps/components/tooltip";
import { useState } from "react";

export default function Controlled() {
  const [open, setOpen] = useState(false);
  return (
    <div className="flex items-center gap-md p-lg">
      <Tooltip open={open} onOpenChange={setOpen}>
        <TooltipTrigger asChild>
          <Button variant="outline" size="sm">
            Pin this patch
          </Button>
        </TooltipTrigger>
        <TooltipContent>Shown to everyone on the trail</TooltipContent>
      </Tooltip>
      <Button
        size="sm"
        variant="ghost"
        onClick={() => {
          setOpen((value) => !value);
        }}
      >
        {open ? "Hide hint" : "Show hint"}
      </Button>
    </div>
  );
}

Props

TooltipProps

Prop	Type	Description
children	ReactNode
defaultOpen?	boolean
delayDuration?	number
onOpenChange()?	(open) => void	Called after the tooltip open state changes.
open?	boolean
side?	"bottom" | "left" | "right" | "top"

• childrenReactNode
• defaultOpen?boolean
• delayDuration?number
• onOpenChange()?(open) => void

  Called after the tooltip open state changes.

• open?boolean
• side?"bottom" | "left" | "right" | "top"

TooltipTriggerProps

Prop	Type	Description
asChild?	boolean
children?	ReactNode

• asChild?boolean
• children?ReactNode

TooltipContentProps

Prop	Type	Description
children	ReactNode

• childrenReactNode

Full types: API reference.