Documentation

Tooltip

Item tooltip with 94% dark purple fill, gradient border and white text shadow.

import { Tooltip, TooltipPopup, TooltipTrigger } from "./index";

/**
 * Tooltip 预览用例：物品悬浮提示
*/
export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger className="mc-tex-slot block size-18">
        <span className="sr-only">附魔金苹果</span>
      </TooltipTrigger>
      <TooltipPopup>
        <span className="text-mc-gold">附魔金苹果</span>
        <div className="text-mc-purple">伤害吸收 IV（0:05）</div>
        <div className="text-mc-gray">minecraft:enchanted_golden_apple</div>
      </TooltipPopup>
    </Tooltip>
  );
}

Install

CLI copy

$npx shadcn add @tennantite/tooltip

npm install

$pnpm add @tennantite/ui

npm installs the compiled package; use the CLI copy above to adapt the source.

Usage

npm import

import { Tooltip, TooltipPopup, TooltipTrigger } from "@tennantite/ui";

CLI copy import

import { Tooltip, TooltipPopup, TooltipTrigger } from "@/components/tennantite/tooltip";

import { Tooltip, TooltipPopup, TooltipTrigger } from "./index";

/**
 * Tooltip 预览用例：物品悬浮提示
*/
export function TooltipDemo() {
  return (
    <Tooltip>
      <TooltipTrigger className="mc-tex-slot block size-18">
        <span className="sr-only">附魔金苹果</span>
      </TooltipTrigger>
      <TooltipPopup>
        <span className="text-mc-gold">附魔金苹果</span>
        <div className="text-mc-purple">伤害吸收 IV（0:05）</div>
        <div className="text-mc-gray">minecraft:enchanted_golden_apple</div>
      </TooltipPopup>
    </Tooltip>
  );
}

API Reference

No public props.

Source

packages/ui/src/primitives/tooltip/index.tsx

The npm package keeps the source tree, so you can copy and adapt it directly.