工具提示

安装Terminal

npm install @a3s-lab/ui@0.3.0

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

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

用途

Include 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 或捆绑程序导入？请参阅安装页。

Add your tooltip 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>

#工具提示

#用途

Include CSS

Add your tooltip HTML

#示例

#默认

#侧面

#图标按钮

#禁用按钮

#链接

#RTL

工具提示

用途

示例

默认

侧面

图标按钮

禁用按钮

链接

RTL