Tooltip

import {
  Tooltip,
  TooltipContent,
  TooltipLabel,
  TooltipProvider,
  TooltipTrigger,
} from "@fanvue/ui";
import type {
  TooltipContentProps,
  TooltipLabelProps,
  TooltipPlacement,
  TooltipProps,
  TooltipProviderProps,
  TooltipTriggerProps,
} from "@fanvue/ui";

import { InfoCircleIcon, Tooltip, TooltipContent, TooltipTrigger } from "@fanvue/ui";

<Tooltip defaultOpen>
  <TooltipTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </TooltipTrigger>
  <TooltipContent>Tooltip</TooltipContent>
</Tooltip>

import { InfoCircleIcon, Tooltip, TooltipContent, TooltipTrigger } from "@fanvue/ui";

<Tooltip defaultOpen>
  <TooltipTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </TooltipTrigger>
  <TooltipContent>
    This is a longer tooltip that demonstrates how the component handles multiline text content.
  </TooltipContent>
</Tooltip>

import { InfoCircleIcon, Tooltip, TooltipContent, TooltipTrigger } from "@fanvue/ui";

function Example() {
  const placements = [
    "top-start",
    "top",
    "top-end",
    "left-start",
    "spacer-1",
    "right-start",
    "left",
    "spacer-2",
    "right",
    "left-end",
    "spacer-3",
    "right-end",
    "bottom-start",
    "bottom",
    "bottom-end",
  ] as const;
  return (
    <div className="grid grid-cols-3 place-items-center gap-24 py-24">
      {placements.map((slot) =>
        slot.startsWith("spacer") ? (
          <div key={slot} />
        ) : (
          <Tooltip key={slot} defaultOpen>
            <TooltipTrigger asChild>
              <button type="button" className="text-content-secondary">
                <InfoCircleIcon className="size-5" />
              </button>
            </TooltipTrigger>
            <TooltipContent placement={slot as Exclude<typeof slot, `spacer-${string}`>}>
              {slot}
            </TooltipContent>
          </Tooltip>
        ),
      )}
    </div>
  );
}

import { InfoCircleIcon, Tooltip, TooltipContent, TooltipTrigger } from "@fanvue/ui";

<Tooltip defaultOpen>
  <TooltipTrigger asChild>
    <button type="button" className="text-content-secondary">
      <InfoCircleIcon className="size-5" />
    </button>
  </TooltipTrigger>
  <TooltipContent placement="bottom">Tooltip</TooltipContent>
</Tooltip>

import { TooltipLabel } from "@fanvue/ui";

<div className="flex flex-col gap-1">
  <TooltipLabel tooltip="Total earnings for the selected period.">Total Earnings</TooltipLabel>
  <span className="typography-header-heading-xl text-content-primary">$128,046.73</span>
</div>