#工具提示

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>