文档目录

提示气泡

原版 tooltip/background + frame 九宫格 + 白字投影的物品提示。

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>
  );
}

安装

CLI 拷贝

$npx shadcn add @tennantite/tooltip

npm 直装

$pnpm add @tennantite/ui

npm 方式安装编译产物；需要改造源码请用上方的 CLI 拷贝安装。

用法

npm 导入

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

CLI 拷贝导入

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

无公开 props。

源码

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

npm 包保留源码目录，可直接复制改造。