工具提示
轻松创建美观的工具提示。
用法
要应用此组件，请将 data-uk-tooltip 属性添加到元素。您还需要添加一个 title 属性，其值将表示您的工具提示文本。
示例
悬停我
标记
<button class="uk-button" data-uk-tooltip title="">...</button>
<span data-uk-tooltip title="">...</span>对齐
将以下选项之一添加到 data-uk-tooltip 属性以调整工具提示的对齐方式。
| 属性 | 描述 | 示例 |
|---|---|---|
pos:'top' |
将工具提示与顶部对齐。 | |
pos:'top-left' |
将工具提示与左上角对齐。 | |
pos:'top-right' |
将工具提示与右上角对齐。 | |
pos:'bottom' |
将工具提示与底部对齐。 | |
pos:'bottom-left' |
将工具提示与左下角对齐。 | |
pos:'bottom-right' |
将工具提示与右下角对齐。 | |
pos:'left' |
将工具提示与左侧对齐。 | |
pos:'right' |
将工具提示与右侧对齐。 |
标记
<button class="uk-button" data-uk-tooltip="{pos:'bottom-left'}" title="">...</button>JavaScript 选项
这是如何通过属性设置选项的示例
data-uk-tooltip="{pos:'bottom-left'}"| 选项 | 可能的值 | 默认值 | 描述 |
|---|---|---|---|
offset |
整数 | 5 | 相对于源元素的偏移量 |
pos |
字符串 | 'top' | 工具提示位置 |
animation |
布尔值 | false | 淡入工具提示 |
delay |
整数 | 0 | 以毫秒为单位延迟工具提示显示 |
cls |
字符串 | '' | 显示时添加的自定义类 |
activeClass |
字符串 | 'uk-active' | 切换的活动类 |
