工具提示

工具提示在悬停或聚焦时补充简短说明，不能承载完成任务所必需的信息或操作。

安装Terminal

npm install @a3s-lab/ui

<button class="btn" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>

import "@a3s-lab/ui/a3s.css";

用法

引入 CSS

导入 Tailwind 和一个完整的 A3S UI 风格包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者仅导入基本 CSS、工具提示组件 CSS 和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/tooltip.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用 CDN 或捆绑程序导入？请参阅安装页。

添加工具提示 HTML

将 data-tooltip 添加到触发元素。使用data-side和data-align更改位置：

data-tooltip：工具提示文本。
data-side Optional：top、bottom、left、right、inline-start 或 inline-end。默认为 top。
data-align Optional：start、center 或 end。默认为 center。

A3S UI 工具提示仅包含 CSS 和文本。这有意与 shadcn/ui 的组合工具提示内容不同，后者可以呈现任意标记并使用门户。

<button class="btn" data-variant="outline" data-tooltip="Tooltip text" data-side="bottom" data-align="center">Bottom</button>

示例

默认

侧面

<div class="flex flex-wrap gap-2">
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-start">Inline Start</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="top">Top</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="bottom">Bottom</button>
  <button class="btn" data-variant="outline" data-tooltip="Tooltip" data-side="inline-end">Inline End</button>
</div>

图标按钮

<button class="btn" data-variant="ghost" data-size="icon" data-tooltip="Additional information" aria-label="Info"><svg class="lucide lucide-info" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10" /><path d="M12 16v-4" /><path d="M12 8h.01" /></svg></button>

禁用按钮

链接

Learn more

RTL

<div dir="rtl" class="flex gap-2">
  <button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-start">Inline Start</button>
  <button class="btn" data-variant="outline" data-tooltip="تلميح" data-side="inline-end">Inline End</button>
</div>

#工具提示

#用法

引入 CSS

添加工具提示 HTML

#示例

#默认

#侧面

#图标按钮

#禁用按钮

#链接

#RTL

工具提示

用法

示例

默认

侧面

图标按钮

禁用按钮

链接

RTL