Tooltip

import { Button } from "@bosunkit/components/button";
import { Tooltip, TooltipGroup } from "@bosunkit/components/tooltip";
import { Crosshair, Layers, Ruler, ZoomIn, ZoomOut, type LucideIcon } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "A chart toolbar in one group: the first label waits 200 ms, and moving along the row opens each next label at once.";

const TOOLS: readonly { readonly label: string; readonly Icon: LucideIcon }[] = [
  { label: "Zoom in", Icon: ZoomIn },
  { label: "Zoom out", Icon: ZoomOut },
  { label: "Center on vessel", Icon: Crosshair },
  { label: "Chart layers", Icon: Layers },
  { label: "Measure distance", Icon: Ruler },
];

export default function Group(): ReactElement {
  return (
    <TooltipGroup>
      <div role="toolbar" aria-label="Chart" style={{ display: "flex", gap: "var(--space-xs)" }}>
        {TOOLS.map(({ label, Icon }: { readonly label: string; readonly Icon: LucideIcon }): ReactElement => (
          <Tooltip key={label} content={label} side="bottom">
            <Button size="icon" aria-label={label}>
              <Icon size={18} aria-hidden />
            </Button>
          </Tooltip>
        ))}
      </div>
    </TooltipGroup>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import { Crosshair } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "An icon-only button: the tooltip shows its name to the eye, and aria-label gives the same name to a screen reader.";

export default function Trigger(): ReactElement {
  return (
    <Tooltip content="Center on vessel" side="right">
      <Button size="icon" aria-label="Center on vessel">
        <Crosshair size={18} aria-hidden />
      </Button>
    </Tooltip>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, type LucideIcon } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "Four pan buttons, each with its label on the outward side: top, right, bottom and left.";

type Side = "top" | "right" | "bottom" | "left";

const PAN: readonly {
  readonly side: Side;
  readonly label: string;
  readonly Icon: LucideIcon;
  readonly area: string;
}[] = [
  { side: "top", label: "Pan north", Icon: ArrowUp, area: "1 / 2" },
  { side: "right", label: "Pan east", Icon: ArrowRight, area: "2 / 3" },
  { side: "bottom", label: "Pan south", Icon: ArrowDown, area: "3 / 2" },
  { side: "left", label: "Pan west", Icon: ArrowLeft, area: "2 / 1" },
];

export default function Sides(): ReactElement {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(3, auto)",
        gap: "var(--space-xs)",
        alignSelf: "center",
        padding: "var(--space-2xl)",
      }}
    >
      {PAN.map(({ side, label, Icon, area }: (typeof PAN)[number]): ReactElement => (
        <Tooltip key={side} content={label} side={side}>
          <Button size="icon" aria-label={label} style={{ gridArea: area }}>
            <Icon size={18} aria-hidden />
          </Button>
        </Tooltip>
      ))}
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "Three wide buttons with their labels below, lined up with the start, the center and the end of each button.";

type Align = "start" | "center" | "end";

const ALIGNMENTS: readonly Align[] = ["start", "center", "end"];

export default function Alignment(): ReactElement {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-2xl)", alignSelf: "stretch" }}>
      {ALIGNMENTS.map(
        (align: Align): ReactElement => (
          <Tooltip key={align} content={`Aligned to the ${align}`} side="bottom" align={align}>
            <Button style={{ width: "100%" }}>{`align="${align}"`}</Button>
          </Tooltip>
        ),
      )}
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import { Anchor } from "lucide-react";
import { useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "The button sits at the top edge of its panel, so a label asked for above opens below, with its arrow turned.";

export default function Flip(): ReactElement {
  const [panel, setPanel]: [HTMLDivElement | null, Dispatch<SetStateAction<HTMLDivElement | null>>] =
    useState<HTMLDivElement | null>(null);
  return (
    <div
      ref={setPanel}
      style={{
        alignSelf: "stretch",
        display: "flex",
        justifyContent: "center",
        // Room under the button for the label, its gap and the edge's margin; none above it.
        paddingBottom: "calc(var(--space-2xl) * 2)",
        border: "1px dashed var(--border-bright)",
        borderRadius: "var(--radius-md)",
      }}
    >
      <Tooltip content="Anchor watch" side="top" collisionBoundary={panel}>
        <Button size="icon" aria-label="Anchor watch">
          <Anchor size={18} aria-hidden />
        </Button>
      </Tooltip>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Label } from "@bosunkit/components/label";
import { Switch } from "@bosunkit/components/switch";
import { Tooltip } from "@bosunkit/components/tooltip";
import { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, type LucideIcon } from "lucide-react";
import {
  useEffect,
  useId,
  useState,
  useSyncExternalStore,
  type Dispatch,
  type ReactElement,
  type SetStateAction,
} from "react";

export const description: string =
  "Showing and hiding all four labels together: each fades in moving away from its button, and back as it closes. " +
  "Slow motion stretches the 120 ms to 720 ms so the movement can be seen.";

type Side = "top" | "right" | "bottom" | "left";

const PAN: readonly {
  readonly side: Side;
  readonly label: string;
  readonly Icon: LucideIcon;
  readonly area: string;
}[] = [
  { side: "top", label: "Pan north", Icon: ArrowUp, area: "1 / 2" },
  { side: "right", label: "Pan east", Icon: ArrowRight, area: "2 / 3" },
  { side: "bottom", label: "Pan south", Icon: ArrowDown, area: "3 / 2" },
  { side: "left", label: "Pan west", Icon: ArrowLeft, area: "2 / 1" },
];

/** The token the tooltip's entrance runs on, stretched six times in slow motion as the motion page's previews
    are; the close runs on `--motion-fast-duration` and keeps its own speed. */
const DURATION_TOKEN: string = "--motion-medium-duration";
const SLOW_DURATION: string = "1200ms";

const REDUCED_MOTION: string = "(prefers-reduced-motion: reduce)";

function subscribeReducedMotion(onChange: () => void): () => void {
  const query: MediaQueryList = window.matchMedia(REDUCED_MOTION);
  query.addEventListener("change", onChange);
  return (): void => {
    query.removeEventListener("change", onChange);
  };
}

/** Whether the system asks for reduced motion; false on the server. */
function useReducedMotion(): boolean {
  return useSyncExternalStore(
    subscribeReducedMotion,
    (): boolean => window.matchMedia(REDUCED_MOTION).matches,
    (): boolean => false,
  );
}

export default function Motion(): ReactElement {
  const [shown, setShown]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const [slow, setSlow]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const reduced: boolean = useReducedMotion();
  const slowId: string = useId();

  // The labels render in a portal on the page's body, so the stretched duration is set on the root while slow motion
  // is on, and taken off again when it is turned off or the example leaves the page.
  useEffect((): (() => void) | undefined => {
    if (!slow) {
      return undefined;
    }
    const root: HTMLElement = document.documentElement;
    const previous: string = root.style.getPropertyValue(DURATION_TOKEN);
    root.style.setProperty(DURATION_TOKEN, SLOW_DURATION);
    return (): void => {
      if (previous === "") {
        root.style.removeProperty(DURATION_TOKEN);
      } else {
        root.style.setProperty(DURATION_TOKEN, previous);
      }
    };
  }, [slow]);

  return (
    <div style={{ display: "flex", flexDirection: "column", alignItems: "center", alignSelf: "stretch" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-lg)", flexWrap: "wrap" }}>
        <Button
          aria-pressed={shown}
          onClick={(): void => {
            setShown(!shown);
          }}
        >
          {shown ? "Hide labels" : "Show labels"}
        </Button>
        <span style={{ display: "inline-flex", alignItems: "center", gap: "var(--space-sm)" }}>
          <Switch id={slowId} checked={slow} onCheckedChange={setSlow} />
          <Label htmlFor={slowId}>Slow motion (×6)</Label>
        </span>
      </div>
      {reduced && (
        <p style={{ margin: "var(--space-sm) 0 0", fontSize: 12, color: "var(--text-dim)", textAlign: "center" }}>
          Your system asks for reduced motion, so the labels appear and go without moving. Turn off Reduce motion in the
          system&apos;s accessibility settings to see the movement.
        </p>
      )}
      <div
        style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, auto)",
          gap: "var(--space-xs)",
          padding: "var(--space-2xl)",
        }}
      >
        {PAN.map(({ side, label, Icon, area }: (typeof PAN)[number]): ReactElement => (
          <Tooltip key={side} content={label} side={side} open={shown}>
            <Button size="icon" aria-label={label} style={{ gridArea: area }}>
              <Icon size={18} aria-hidden />
            </Button>
          </Tooltip>
        ))}
      </div>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "The default 200 ms delay beside a delay of 0, which opens the label as soon as the pointer arrives.";

export default function Delay(): ReactElement {
  return (
    <div style={{ display: "flex", gap: "var(--space-xl)" }}>
      <Tooltip content="Opens after 200 ms">
        <Button>Default delay</Button>
      </Tooltip>
      <Tooltip content="Opens at once" delay={0}>
        <Button>No delay</Button>
      </Tooltip>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "A disabled button takes no pointer or focus, so a focusable wrapper carries the tooltip that says what enables it.";

export default function Disabled(): ReactElement {
  return (
    <Tooltip title="Start passage" content="Load a route first, then start the passage from here.">
      <span tabIndex={0} style={{ display: "inline-flex", borderRadius: "var(--radius-md)" }}>
        <Button variant="primary" disabled style={{ pointerEvents: "none" }}>
          Start passage
        </Button>
      </span>
    </Tooltip>
  );
}

import { Term } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "An abbreviation with a dotted underline; a resting mouse, a press or a tap opens the term written out and what it measures.";

export default function TermExample(): ReactElement {
  return (
    <p style={{ margin: 0, color: "var(--text)" }}>
      Holding 6.2 kn <Term abbreviation="SOG" definition="Speed over ground">How fast the vessel moves over the seabed, from the GPS.</Term>{" "}
      on a course of 214°.
    </p>
  );
}

import { ReadingDetail } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "A depth reading whose detail names where the value comes from and how old it is.";

export default function Reading(): ReactElement {
  return (
    <ReadingDetail source="Echo sounder" ageText="3 s ago">
      <span>
        Depth <b>4.2</b> m
      </span>
    </ReadingDetail>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import { Anchor } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "A title with two short sentences under it: what the control does, and the reading it works from.";

export default function Rich(): ReactElement {
  return (
    <Tooltip
      title="Anchor watch"
      content="Raises an alarm when the vessel leaves its swing circle. Radius 35 m; the vessel is 12 m from the anchor."
      side="right"
    >
      <Button size="icon" aria-label="Anchor watch">
        <Anchor size={18} aria-hidden />
      </Button>
    </Tooltip>
  );
}

import { Button } from "@bosunkit/components/button";
import { Tooltip } from "@bosunkit/components/tooltip";
import { Search } from "lucide-react";
import type { ReactElement } from "react";

export const description: string = "A label with the keyboard shortcut that does the same thing, in a key chip.";

export default function Shortcut(): ReactElement {
  return (
    <Tooltip content="Search" shortcut="Ctrl K" side="right">
      <Button size="icon" aria-label="Search" aria-keyshortcuts="Control+K">
        <Search size={18} aria-hidden />
      </Button>
    </Tooltip>
  );
}

import { Badge } from "@bosunkit/components/badge";
import { Tooltip, TooltipGroup, type TooltipPriority } from "@bosunkit/components/tooltip";
import type { CSSProperties, ReactElement } from "react";

export const description: string =
  "A tooltip per priority on the badge it explains: an edge in the alarm, warning or caution color, or none.";

interface Entry {
  readonly priority: TooltipPriority;
  readonly variant: "red" | "amber" | "yellow" | "dim";
  readonly text: string;
  readonly detail: string;
}

const ENTRIES: readonly Entry[] = [
  {
    priority: "alarm",
    variant: "red",
    text: "Bilge alarm",
    detail: "Water at 38 cm in the aft bilge since 03:12 UTC.",
  },
  { priority: "warning", variant: "amber", text: "Oil change", detail: "Due in 18 h of engine running." },
  { priority: "caution", variant: "yellow", text: "Shoaling", detail: "6.2 m under the keel, safety depth 5.0 m." },
  { priority: "none", variant: "dim", text: "No fix", detail: "No position from the backup GPS since 03:12 UTC." },
];

const ROW: CSSProperties = { display: "flex", flexWrap: "wrap", gap: "var(--space-sm)" };

export default function Tone(): ReactElement {
  return (
    <TooltipGroup>
      <div style={ROW}>
        {ENTRIES.map((entry: Entry): ReactElement => (
          <Tooltip key={entry.text} title={entry.text} content={entry.detail} priority={entry.priority} side="bottom">
            <Badge variant={entry.variant} tabIndex={0}>
              {entry.text}
            </Badge>
          </Tooltip>
        ))}
      </div>
    </TooltipGroup>
  );
}

import { Button } from "@bosunkit/components/button";
import { Label } from "@bosunkit/components/label";
import { Switch } from "@bosunkit/components/switch";
import { Tooltip } from "@bosunkit/components/tooltip";
import { Compass, Gauge, Map as MapIcon, Radio, type LucideIcon } from "lucide-react";
import { useId, useState, type Dispatch, type ReactElement, type SetStateAction } from "react";

export const description: string =
  "A rail whose labels follow open and onOpenChange: hover opens one, and the switch opens all of them at once.";

const PAGES: readonly { readonly label: string; readonly Icon: LucideIcon }[] = [
  { label: "Situation", Icon: Compass },
  { label: "Chart", Icon: MapIcon },
  { label: "Instruments", Icon: Gauge },
  { label: "VHF", Icon: Radio },
];

export default function Controlled(): ReactElement {
  const switchId: string = useId();
  const [showAll, setShowAll]: [boolean, Dispatch<SetStateAction<boolean>>] = useState<boolean>(false);
  const [hovered, setHovered]: [string | null, Dispatch<SetStateAction<string | null>>] = useState<string | null>(null);
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-lg)" }}>
      <div style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)" }}>
        <Switch id={switchId} checked={showAll} onCheckedChange={setShowAll} />
        <Label htmlFor={switchId} style={{ marginBottom: 0, cursor: "pointer" }}>
          Show all labels
        </Label>
      </div>
      <nav aria-label="Pages" style={{ display: "flex", flexDirection: "column", gap: "var(--space-xs)" }}>
        {PAGES.map(({ label, Icon }: { readonly label: string; readonly Icon: LucideIcon }): ReactElement => (
          <Tooltip
            key={label}
            content={label}
            side="right"
            open={showAll || hovered === label}
            onOpenChange={(open: boolean): void => {
              setHovered(open ? label : null);
            }}
          >
            <Button size="icon" aria-label={label}>
              <Icon size={18} aria-hidden />
            </Button>
          </Tooltip>
        ))}
      </nav>
    </div>
  );
}

import { Button } from "@bosunkit/components/button";
import { Popover } from "@bosunkit/components/popover";
import { Info } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "A note that stays open until its close button or Escape is pressed: a Popover from the kit, not a tooltip.";

export default function Persistent(): ReactElement {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "var(--space-sm)" }}>
      <span style={{ color: "var(--text)" }}>CPA alarm at 0.5 NM</span>
      <Popover
        trigger={
          <Button size="lg" variant="ghost" aria-label="About the CPA alarm">
            <Info size={18} aria-hidden />
          </Button>
        }
        title="Closest point of approach"
        side="bottom"
        align="start"
      >
        The alarm sounds when another vessel is predicted to pass within 0.5 NM of yours.
      </Popover>
    </div>
  );
}

import { Term } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "An abbreviation with a dotted underline; a resting mouse, a press or a tap opens the term written out and what it measures.";

export default function TermExample(): ReactElement {
  return (
    <p style={{ margin: 0, color: "var(--text)" }}>
      Holding 6.2 kn <Term abbreviation="SOG" definition="Speed over ground">How fast the vessel moves over the seabed, from the GPS.</Term>{" "}
      on a course of 214°.
    </p>
  );
}

import { ReadingDetail } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "A depth reading whose detail names where the value comes from and how old it is.";

export default function Reading(): ReactElement {
  return (
    <ReadingDetail source="Echo sounder" ageText="3 s ago">
      <span>
        Depth <b>4.2</b> m
      </span>
    </ReadingDetail>
  );
}

import { TruncatedText } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";

export const description: string =
  "A label cut with an ellipsis; a resting mouse, a press or a tap offers the whole text — a label that fits stays plain.";

export default function Truncated(): ReactElement {
  return (
    <div style={{ width: "16em", border: "1px solid var(--border)", borderRadius: "var(--radius-md)", padding: "var(--space-sm)" }}>
      <TruncatedText text="The anchor watch radius in the swing circle" />
    </div>
  );
}

import { DataTip, type DataTipPoint } from "@bosunkit/components/tooltip";
import type { ReactElement } from "react";
import { useRef, type RefObject } from "react";

export const description: string =
  "The value under the pointer: the tip follows the pointer across the chart, and a finger drags it along.";

export default function DataTipExample(): ReactElement {
  const chart: RefObject<SVGSVGElement | null> = useRef<SVGSVGElement | null>(null);
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: "22em" }}>
      <svg ref={chart} viewBox="0 0 220 90" role="img" aria-label="A trend rising and falling.">
        <polyline points="10,70 60,30 110,60 160,20 210,50" fill="none" stroke="var(--accent)" strokeWidth="2" />
      </svg>
      <DataTip
        anchor={chart}
        label="Trend values"
        render={(point: DataTipPoint): ReactElement => <span>{Math.round((1 - point.y / 90) * 100)}% of range</span>}
      />
    </div>
  );
}