tooltip(提示框)组件
一、class加载方式
<span id="pos" class="easyui-tooltip" title="这是提示内容">内容</span>
二、js加载方式
$("#pos").tooltip({
//属性
content:'<strong>这是内容提示框</strong>', //消息框内容,识别html标签,默认为 null,值为string
position:'bottom', //消息框位置。left/right/top/bottom 默认 bottom,值为string
trackMouse:true, // 允许提示框跟随鼠标移动, 默认为false,值为 boolean
deltaX:100, //水平方向提示框的位置。默认为 0,值为 number
deltaY:20, //垂直方向提示框的位置。默认为 0,值为 number
showDelay:1000, //延时多少秒显示提示框。默认 200,值为 number
hideDelay:1000, //延时多少秒隐藏提示框。默认 100,值为 number
//showEvent:'click',//当激活事件的时候显示提示框,默认为 mouseenter,值为string
//hideEvent:'dblclick',// 当激活事件的时候显示提示框,默认为 mouseleave ,值为string
//事件
onShow : function (e) {
console.log($('#pos').tooltip('tip'));//返回 tip 元素对象,传参none
console.log($('#pos').tooltip('arrow'));//返回箭头元素对象,传参none
}, //在显示提示框的时候触发,传参为e
onHide : function (e) {}, //在隐藏提示框的时候触发,传参为e
onUpdate :function (content) {
alert("内容改变为"+content)
},//在提示框内容更新的时候触发,传参为content
//onPosition:function (left,top) {
//console.log('left:' + left + ',top:' + top);
// },//在提示框位置改变的时候触发,传参 left、top
onDestroy:function () {},// 在提示框被销毁的时候触发,传参none
// onShow : function(e) {
// $('.tooltip-right').css('left', 500);
// },
// onHide : function (e) {
// $('#pos').tooltip('reposition');//重置工具栏位置
// }
});
//方法
$("#pos").click(function () {
// $(this).tooltip("update","<strong>这是内容提示框</strong>");
$(this).tooltip("destroy");
});
console.log($('#pos').tooltip('options'));//返回属性对象,传参none
//$('#pos').tooltip('show');//显示提示框,传参为e
//$('#pos').tooltip('hide');//隐藏提示框,传参为e
//$('#box').tooltip('destroy');//销毁提示框,传参none
//$('#box').tooltip('update', '更新提示内容');//更新content内容
tooltip(提示框)组件的更多相关文章
- tooltip提示框组件
Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...
- 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
- Tooltip(提示框)组件
一.加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class=&quo ...
- Echarts数据可视化tooltip提示框,开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
- 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框
在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...
- 使用css实现全兼容tooltip提示框
在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...
- CSS3实现Tooltip提示框飞入飞出动画
原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...
- echarts中tooltip提示框位置控制
关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...
- MFC中添加ToolTip提示框
PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型 ...
- echarts自定义tooltip提示框内容
1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...
随机推荐
- 如何多个router 进行合并?
有时间可能有多个人开发,如果在共用router, 势必会造成合并冲突,可以分开多个router.js ,然后进行合并 // router0.jsconst studyRouter = [ { path ...
- tomcat manager详解
Tomcat Manager是Tomcat自带的.用于对Tomcat自身以及部署在Tomcat上的应用进行管理的web应用.Tomcat是Java领域使用最广泛的服务器之一,因此Tomcat Mana ...
- 转载:tomcat性能的优化
考虑一下这种场景,你开发了一个应用,它有十分 优秀的布局设计,最新的特性以及其它的优秀特点.但是在性能这方面欠缺,不管这个应用如何都会遭到客户拒绝.客户总是期望它们的应用应该有更好的性能.如 果你在产 ...
- Codeforces 360C DP 计算贡献
题意:给你一个长度为n的字符串,定义两个字符串的相关度为两个串对应的子串中第一个串字典序大于第二个串的个数.现在给你相关度,和第二个串,问满足条件的第一个串有多少个? 思路:设dp[i][j]为填了前 ...
- Python技能树
本博客Python内容的索引,以后就照着它写了.
- paper 141:some paper with ComputerCV、MachineLearning[转]
copy from:http://blog.csdn.net/zouxy09/article/details/8550952 一.特征提取Feature Extraction: · S ...
- redis常用命令-2
redis常用命令 type your_key #查看Key类型 del your_key #删除key keys * #所有key info #信息 /usr/local/bin/redis-cli ...
- 6.zabbix微信告警3.2
原文地址: https://blog.cactifans.com/2016/01/27/zabbix%E5%BE%AE%E4%BF%A1%E5%91%8A%E8%AD%A6/ pdf : 链接: ht ...
- [CSP-S模拟测试]:简单的区间(分治)
题目描述 给定一个长度为$n$的序列$a$以及常数$k$,序列从$1$开始编号.记$$f(l,t)=\sum \limits_{i=l}^ra_i-\max \limits_{i=l}^r\{a_i\ ...
- 分布式系统理论基础6:Raft、Zab
本文转自:https://www.cnblogs.com/bangerlee/p/5991417.html 本文转自 https://www.cnblogs.com/bangerlee/p/52684 ...