Tooltip(提示框)组件
一．加载方式
//class加载方式
<a href="http://www.ycku.com" title="这是一个提示信息！" class="easyui-tooltip">Hover Me </a>
//JS 加载调用
$('#box').tooltip({
content : '这里可以输入提示内容',
});
二．属性列表
//属性设置
$('#box').tooltip({
position : 'top',
content : '这里可以输入提示内容',
trackMouse : true,
deltaX : 100,
deltaY : 100,
showEvent : 'click',
hideEvent : 'dblclick',
showDelay : 500,
hideDelay : 500,
});
三．事件列表
$('#box').tooltip({
content : '这里可以输入提示内容',
onShow : function (e) {
alert('显示提示框的触发');
},
onHide : function (e) {
alert('隐藏提示框的触发');
},
onUpdate : function (content) {
alert('内容更新为：' + content);
},
onPosition : function (left,top) {
console.log('left:' + left + ',top:' + top);
},
onDestroy : function (none) {
alert('提示框被销毁的时候触发');
},
});
四．方法列表
//返回属性对象
console.log($('#box').tooltip('options'));
//显示提示框
$('#box').tooltip('show');
//隐藏提示框
$('#box').tooltip('hide');
//更新 content 内容
$('#box').tooltip('update', '更新提示内容');
//返回 tip 元素对象
onShow : function () {
console.log($('#box').tooltip('tip'));
},
//返回箭头元素对象
onShow : function () {
console.log($('#box').tooltip('arrow'));
},
//销毁提示框
$('#box').tooltip('destroy');
//重置工具栏位置
onShow : function (e) {
$('.tooltip-right').css('left', 500);
},
onHide : function (e) {
$('#box').tooltip('reposition');
},
PS：我们可以使用$.fn.tooltip.defaults 重写默认值对象。
$.fn.tooltip.defaults.position = 'top';
最新文章
- TypeScript 强类型 JavaScript – Rafy Web 框架选型
- C# lambda
- NET基础（2）：类型转换
- 织梦dedecms如何快速使用拼音首字母做栏目名称
- [ios][swift]swift GPS传感器的调用
- C#正则表达式编程（一）：C#中有关正则的类
- maven auto-config 多环境自动打包
- AngularJS promise()
- Android学习之Drawable（一）
- typeJavaScript笔记----字符串，参数，函数，表达式，循环
- jQuery动态绑定
- CastleWindsor 使用说明
- 深入理解用户权限rwx
- [DeeplearningAI笔记]改善深层神经网络1.4_1.8深度学习实用层面_正则化Regularization与改善过拟合
- FJUT寒假作业第二周C题解（位运算）
- windows下程序启动检查，只启动一个实例
- avue的小白之路
- JVM学习02:GC垃圾回收和内存分配
- linux上部署SpringBoot项目及遇到的问题
- Bash 中常见的字符串操作