admin管理员组文章数量:1589006
完全满足需求,轻量级 tooltips 提示插件:popper.js
4月 20, 2016
评论
Sponsor
Popper.js 是一个扩展性较好的 tooltips 提示类 JS 插件,不需要依赖 jQuery 库,大小仅为 3.5KB 左右,使用与配置相当简单,若你的 Web 网站有这个需要,可以尝试使用这个该特效插件。
JS 插件名称:popper.js
下载地址: https://popper.js/
下面我们来看看这个 JS 提示类代码插件的用法与功能介绍。
一、自定义提示方向
可随意设置上下左右显示,简单一行代码,就能设置
代码,把 left 修改为对应的方向文字即可。
var popper = new Popper(referenceElement, onPopper, {
placement: ‘left’
});
二、滚动容器显示
这个不好描述,大家还是看 DEMO 图吧:
代码加入 boundariesElement: container 即可:
var popper = new Popper(referenceElement, onLeftPopper, {
placement: ‘left’,
boundariesElement: container
});
三、支持拖拽移动
拖拽元素时,Tooltips 提示内容会自动粘附于被拖拽的容器。
代码:
var popper = new Popper(referenceElement, onLeftPopper, {
placement: ‘left’,
flipBehavior: [‘left’, ‘bottom’, ‘top’],
boundariesElement: container
});
四、超出浏览器边界,自动切的方向
有时间因为内容置于网页边缘,导致 Tooltips 的提示不能完整显示,而 Popper.js 就解决了这个问题。
代码:
var popper = new Popper(referenceElement, onBottomPopper, {
placement: ‘bottom’
});
总结
总的来说,这个插件是很适合用在网站上,功能基本够用,如需查看更多参数介绍,请到该 JS 插件的官方网站查看。
推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。
{ 发表评论 }
姓 名 (必填)
邮 件 (必填)
网 站
版权声明:本文标题:html 提示插件,完全满足需求,轻量级 tooltips 提示插件:popper.js 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1728049816a1143540.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论