Tooltip

1"use client";2 3import {4  cloneElement,5  useEffect,6  useId,7  useLayoutEffect,8  useRef,9  useState,10  type CSSProperties,11  type HTMLAttributes,12  type ReactElement,13  type ReactNode,14} from "react";15 16export type TooltipPlacement = "auto" | "top" | "bottom" | "left" | "right";17 18export type TooltipProps = Omit<19  HTMLAttributes<HTMLSpanElement>,20  "content" | "children"21> & {22  /** Short description. Keep it to a phrase or one sentence. */23  content: ReactNode;24  /** A single focusable trigger, usually a button or link. */25  children: ReactElement<{ "aria-describedby"?: string }>;26  /** A preferred side. `auto` flips to the side with the most room. */27  placement?: TooltipPlacement;28  /** Hover delay before opening. Keyboard focus opens immediately. */