components/tooltip/tooltip.react.tsx

Functions

Imports

It imports components/tooltip/tooltip.ts. No module of this repo imports it.

Source

1import { useCallback, useEffect, useId, useRef, useState, type ReactNode } from "react";
2import { attach } from "./tooltip.ts";
3
4export interface TriggerProps {
5  ref: (el: HTMLElement | null) => void;
6  "aria-describedby": string;
7}
8
9export interface TooltipProps {
10  // Extra detail only. The trigger has its own visible label or accessible name.
11  tip: ReactNode;
12  // Renders the trigger, a focusable element, with these props spread on it:
13  // {(t) => <button type="button" className="cap-btn" {...t}>Retry job</button>}
14  children: (trigger: TriggerProps) => ReactNode;
15  // Where the tip sits: above the trigger by default, as shadcn's Tooltip.
16  side?: "top" | "bottom" | "left" | "right" | "inline-start" | "inline-end";
17  align?: "start" | "center" | "end";
18  // The small arrow pointing at the trigger. On by default.
19  arrow?: boolean;
20}
21
22// Whether the tip is open is the platform's popover state, not React state: React renders
23// the same markup either way, and the behaviour module shows and hides it.
24export function Tooltip({ tip, children, side = "top", align, arrow = true }: TooltipProps) {
25  const id = useId();
26  const tipRef = useRef<HTMLDivElement>(null);
27  const [trigger, setTrigger] = useState<HTMLElement | null>(null);
28  const ref = useCallback((el: HTMLElement | null) => setTrigger(el), []);
29
30  useEffect(() => {
31    if (trigger && tipRef.current) return attach(trigger, tipRef.current);
32  }, [trigger]);
33
34  return (
35    <>
36      {children({ ref, "aria-describedby": id })}
37      <div className="cap-popover" data-cap="tooltip" data-variant="tooltip" data-side={side} data-align={align} id={id} role="tooltip" popover="manual" ref={tipRef}>
38        {tip}
39        {arrow ? <span className="cap-popover-arrow" aria-hidden="true" /> : null}
40      </div>
41    </>
42  );
43}