Murasaki
Components

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.

Usage

import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@murasakijs/ui";
<TooltipProvider>
  <Tooltip>
    <TooltipTrigger>Hover</TooltipTrigger>
    <TooltipContent>Add to library</TooltipContent>
  </Tooltip>
</TooltipProvider>

API Reference

Subcomponents

ComponentDescription
TooltipProviderWraps the part of your tree that uses tooltips; required at least once (e.g. once near the app root), configures shared delayDuration etc.
TooltipThe root primitive for a single tooltip. Accepts open, defaultOpen, onOpenChange, delayDuration.
TooltipTriggerThe element the tooltip is attached to. Supports asChild.
TooltipContentThe popup content. Accepts sideOffset (default 8).
TooltipPortalPortals content into document.body. Used internally by TooltipContent.

Hover/focus activation, dismissal, and positioning are provided by React Aria Components.

Improve this page on GitHub

On this page