UIkit tooltip学习记录

什么是tooltip?

就是工具提示。
举个例子
如下箭头所指就是个tooltip

image.png

如何实现?

利用uikit附加组件,需要引入uikit的tooltip.css以及tooltip.js才可以。(重要,因为tooltip的基础组件不包含这个)

举个例子

如下,添加data-uk-tooltip属性即可,title属性规定提示的内容。

<button class="uk-button" data-uk-tooltip title="this is a test">click</button>

如何设置提示的位置?

给data-uk-tooltip属性设置值就可以。如下

<button class="uk-button" data-uk-tooltip="{pos:'right'}" title="this is a test">click</button>

结果可以看出是从右侧弹出提示

image.png

工具提示 - UIkit 中文文档

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容