返回介绍

工具提示

发布于 2019-05-26 16:28:29 字数 2186 浏览 889 评论 0 收藏 0

轻松创建一个漂亮的工具提示。

用法

要应用这个组件,需要为某个元素添加 data-uk-tooltip 属性。你还需要添加一个 title 属性,它的值即是提示文本。

注意 使用此组件需要额外添加 tooltip.css 文件,在css/components文件夹中。此组件需要额外添加 tooltip.js 文件,在js/components文件夹中。

<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'}"
选项可用的值默认值描述
offsetinteger5与源元素之间的偏移量
posstring'top'工具提示组件定位
animationbooleanfalse工具提示的淡入动画
delayinteger0提示组件延迟显示多少毫秒
clsstring''显示提示时,添加的自定义class
activeClassstring'uk-active'被拨动的选中类名/Toggled active class

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文