一、创建组件
0.Tooltip不依赖其他组件
1.使用class加载
Hover me
登录后复制
2.使用js加载
Hover me $(function () { $("#tBox").tooltip(); })
登录后复制登录后复制
二、属性
立即学习“前端免费学习笔记（深入）”；
1.position：消息框位置（left，right，top，默认bottom）
Hover me $(function () { $("#tBox").tooltip(); })
登录后复制登录后复制
2.content：消息框内容，可以是html
Hover me $(function () { $("#tBox").tooltip({ content: "我是html" }); })
登录后复制
3.trackMouse：为true时，允许提示框跟鼠标移动
Hover me $(function () { $("#tBox").tooltip({ trackMouse: true }); })
登录后复制
4.deltaX，deltaY：提示框具体左上角的位置
Hover me $(function () { $("#tBox").tooltip({ deltaX: 50, deltaY:50 }); })
登录后复制
5.showDelay，hideDelay延时多少毫秒显示/隐藏提示框，默认是200
Hover me $(function () { $("#tBox").tooltip({ showDelay: 1000, hideDelay: 2000 }); })
登录后复制
6.showEvent，hideEvent：激活显示/隐藏事件时候的提示框，默认为mouseenter，mouseleave
Hover me $(function () { $("#tBox").tooltip({ //鼠标单击是显示提示框 showEvent: "click", //鼠标双击是隐藏提示框 hideEvent: "dblclick" }); })
登录后复制
三、事件
1.onShow，onHide：在显示/隐藏提示框的时候触发
Hover me $(function () { $("#tBox").tooltip({ onShow: function (e) { alert("显示提示框的触发"); }, onHide: function (e) { alert("隐藏提示框的触发"); } }); })
登录后复制
2.onUpdate：在提示框内容更新时触发，默认content为null
Hover me $(function () { $("#tBox").tooltip({ content: "这是新内容", onUpdate: function (content) { alert("内容被更新:" + content); } }); })
登录后复制
3.onPosition：在提示框位置被改变的时候触发
Hover me $(function () { $("#tBox").tooltip({ onPosition: function (left, top) { console.log("left:" + left + ",top:" + top); } }); })
登录后复制
4.onDestroy：在提示框被撤销的时候触发
Hover me $(function () { $("#tBox").tooltip({ onDestroy: function (none) { alert("提示框被销毁"); } }); $("#tBox").click(function () { $(this).tooltip("destroy"); }); })
登录后复制
四、方法
1.options：返回属性对象
2.show，hide：显示/隐藏提示框
Hover me $(function () { $("#tBox").tooltip({ }); $("#tBox").tooltip("show"); $("#tBox").tooltip("hide"); })
登录后复制
3.update：更新content的内容
Hover me $(function () { $("#tBox").tooltip({ }); //鼠标移动到”Hover me“时触发 $("#tBox").tooltip("update", "更新的内容"); })
登录后复制
4.tip：返回tip元素对象；arraw返回箭头元素对象（实际就是提示框生成的两个div）
Hover me $(function () { $("#tBox").tooltip({ onShow: function () { //div.tooltip.tooltip-bottom console.log($("#tBox").tooltip("tip")); //div.tooltip.tooltip-outer,div.tooltip-arrow console.log($("#tBox").tooltip("arrow")); } }); })
登录后复制
5.reposition：重置提示框位置
Hover me $(function () { $("#tBox").tooltip({ onShow: function () { $(".tooltip-bottom").css("left", 500); }, onHide: function () { $("#tBox").tooltip("reposition"); } }); })
登录后复制
五、组件默认值
$.fn.tooltip.defaults.position = "right";
登录后复制
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3111479.html
