当用户悬停或聚焦在元素上时提供额外信息。
由于工具提示依赖于悬停状态，像手机这样的触摸设备通常不会显示它们。因此，建议您通过UI传达重要信息，而不是依赖工具提示来为移动用户提供信息。
<flux:tooltip content="Settings"> <flux:button icon="cog-6-tooth" icon:variant="outline" /></flux:tooltip>作为简写，您可以直接将 tooltip 属性传递给按钮组件。
<flux:button tooltip="Settings" ... />在工具提示的内容至关重要的情况下，您应该使其 toggleable。这样，触摸设备上的用户就能够通过点击/按压而不是悬停来触发它。
对于美国企业，请输入您的9位数雇主识别号(EIN)，不包含连字符。
对于欧洲公司，请输入包含国家前缀的增值税号（例如，DE123456789）。
<flux:heading class="flex items-center gap-2"> Tax identification number <flux:tooltip toggleable> <flux:button icon="information-circle" size="sm" variant="ghost" /> <flux:tooltip.content class="max-w-[20rem] space-y-2"> <p>For US businesses, enter your 9-digit Employer Identification Number (EIN) without hyphens.</p> <p>For European companies, enter your VAT number including the country prefix (e.g., DE123456789).</p> </flux:tooltip.content> </flux:tooltip></flux:heading>在元素周围定位工具提示以获得最佳可见性。可从 top、right、bottom 或 left 中选择。
<flux:tooltip content="Settings" position="top"> <flux:button icon="cog-6-tooth" icon:variant="outline" /></flux:tooltip><flux:tooltip content="Settings" position="right"> <flux:button icon="cog-6-tooth" icon:variant="outline" /></flux:tooltip><flux:tooltip content="Settings" position="bottom"> <flux:button icon="cog-6-tooth" icon:variant="outline" /></flux:tooltip><flux:tooltip content="Settings" position="left"> <flux:button icon="cog-6-tooth" icon:variant="outline" /></flux:tooltip>默认情况下，禁用按钮上的工具提示不会被触发，因为指针事件也被禁用了。但是，作为一种解决方案，您可以针对包装元素而不是直接针对按钮。
<flux:tooltip content="Cannot merge until reviewed by a team member"> <div> <flux:button disabled icon="arrow-turn-down-right">Merge pull request</flux:button> </div></flux:tooltip>|
属性
|
描述
|
|---|---|
| content |
在工具提示中显示的文本内容。替代使用 flux:tooltip.content 组件。
|
| position |
工具提示相对于触发元素的位置。选项： top（默认）、 right, bottom, left.
|
| align |
工具提示的对齐方式。选项： center（默认）、 start, end.
|
| disabled |
阻止用户与工具提示交互。
|
| gap |
触发元素与工具提示之间的间距。默认： 5px.
|
| offset |
工具提示相对于触发元素的偏移量。默认： 0px.
|
| toggleable |
使工具提示可点击而不仅仅是悬停。对触摸设备很有用。
|
| interactive |
使用适当的 ARIA 属性（aria-expanded 和 aria-controls）来表示工具提示具有交互内容。
|
| kbd |
在工具提示末尾显示的键盘快捷键提示。
|
|
属性
|
描述
|
|---|---|
| data-flux-tooltip |
应用于根元素以进行样式设置和识别。
|