Item information painted with the original Minecraft tooltip surface.
Preview
Example source could not be loaded: tooltip-example. Reload this page to retry.Usage
Wrap triggers in TooltipProvider. Use TooltipTrigger render={<Button />} to keep the real button semantics; pass the same integer scale to the Button and TooltipContent because the root has no scale context.
Composition
TooltipContent already creates its portal and positioner. It defaults to top/center, sideOffset 0 and a maximum logical text width of 170. Scalar text, including explicit newline strings, uses the painted tooltip text; rich children take the custom-content path.
Interaction and limits
Provider delay defaults to 0. Hover or focus the trigger; Escape dismisses the tooltip. Keep the trigger independently named. The existing native coverage covers fixed ASCII layouts and solid backdrops; rich content and arbitrary image backdrops do not inherit that claim.
See the upstream API for the underlying part and event contracts.
Installation
The trigger in the example uses Button. Install button alongside tooltip when copying this composition.
Component source
This is the component implementation. Its supporting styles, helpers and resources are also required. See complete manual installation.
"use client";
import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
import * as React from "react";
import {
isMinecraftTextContent,
isMinecraftTooltipTextElement,
minecraftClasses as cn,
minecraftStyle,
} from "./minecraft-render";
import type { MinecraftProps } from "./minecraft-render";