Lumi UI

工具提示

当元素被悬停或聚焦时出现的弹出层，为可视用户提供简短提示。

DocsAPI Reference

安装

pnpm dlx shadcn@latest add @lumi-ui/tooltip

基本用法

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from "@/components/ui/tooltip";
<Tooltip>
  <TooltipTrigger>悬停查看</TooltipTrigger>
  <TooltipContent>
    工具提示
  </TooltipContent>
</Tooltip>

组件结构

<TooltipProvider>
  <Tooltip>   
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
  <Tooltip>   
    <TooltipTrigger />
    <TooltipContent />
  </Tooltip>
</TooltipProvider>

实用示例

调整延迟时间

分离的触发器

受控模式与多个触发器

带动画效果