Tooltip

Guidelines#

Use it for naming icon-only buttons and showing a value's detail ("Warm-up: day 9 of 14"). Anything someone must read to act goes on the page, not in a tooltip; explanations of a field use HelpTooltip.

What you provide: TooltipTrigger (via asChild on a focusable element) and TooltipContent with a few words. Wrap the app once in TooltipProvider. An icon-only button still needs its own aria-label.

Facts#

API#

TypeScript declarations emitted from src/components/ui/tooltip.tsx (the module also exports its other parts).

declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): any;
declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): any;
declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): any;
declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): any;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function App() {
  return h("div", { className: "flex items-end justify-center gap-6 pt-12" },
    h(DC.Tooltip, { defaultOpen: true },
      h(DC.TooltipTrigger, { asChild: true }, h(DC.Button, { size: "icon", variant: "outline", "aria-label": "Warm-up" }, h(I.Flame))),
      h(DC.TooltipContent, null, "Warm-up: day 9 of 14")),
    h(DC.Button, { size: "icon", variant: "outline", "aria-label": "Settings" }, h(I.Settings)));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Overlays#