通过 $.fn.tooltip.defaults 重写默认的 defaults。

当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。

用法

创建提示框(Tooltip)

1、从标记创建提示框(Tooltip),添加 'easyui-tooltip' class 到元素,不需要任何的 javascript 代码。

<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>

2、使用 javascript 创建提示框(Tooltip)。

<a id="dd" href="javascript:void(0)">Click here</a>
$('#dd').tooltip({
position: 'right',
content: '<span style="color:#fff">This is the tooltip message.</span>',
onShow: function(){
$(this).tooltip('tip').css({
backgroundColor: '#666',
borderColor: '#666'
});
}
});

属性

名称 类型 描述 默认值
position string 提示框(tooltip)位置。可能的值:'left'、'right'、'top'、'bottom'。 bottom
content string 提示框(tooltip)内容。 null
trackMouse boolean 如果设置为 true,提示框(tooltip)会随着鼠标移动。 false
deltaX number 提示框(tooltip)位置的水平距离。 0
deltaY number 提示框(tooltip)位置的垂直距离。 0
showEvent string 引发提示框(tooltip)出现的事件。 mouseenter
hideEvent string 引发提示框(tooltip)消失的事件。 mouseleave
showDelay number 显示提示框(tooltip)的时间延迟。 200
hideDelay number 隐藏提示框(tooltip)的时间延迟。 100

事件

名称 参数 描述
onShow e 当显示提示框(tooltip)时触发。
onHide e 当隐藏提示框(tooltip)时触发。
onUpdate content 当提示框(tooltip)内容更新时触发。
onPosition left,top 当提示框(tooltip)位置改变时触发。
onDestroy none 当提示框(tooltip)销毁时触发。

方法

名称 参数 描述
options none 返回选项(options)属性(property)。
tip none 返回提示(tip)对象。
arrow none 返回箭头(arrow)对象。
show e 显示提示框(tooltip)。
hide e 隐藏提示框(tooltip)。
update content 更新提示框(tooltip)内容。
reposition none 重置提示框(tooltip)位置。
destroy none 销毁提示框(tooltip)。

EasyUI Tooltip 提示框的更多相关文章

  1. 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  2. tooltip提示框组件

    Tooltip 提示框组件 可独立于其他组件通过$.fn.tooltip.defaults重写默认的defaults.当用户移动鼠标指针在某个元素上时,出现提示信息窗口来显示额外信息.提示内容可以包含 ...

  3. 纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

    在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个 ...

  4. 使用css实现全兼容tooltip提示框

    在上一篇文章中,使用css实现了一个全兼容的三角形图标,这个三角型图标可以使用于多种场景,比如下拉图标.多级菜单等,这篇文章我们使用这个图标通过纯css来实现一个我们常见的tooltip提示框. 最终 ...

  5. CSS3实现Tooltip提示框飞入飞出动画

    原文:CSS3实现Tooltip提示框飞入飞出动画 我们见过很多利用背景图片制作的Tooltip提示框,但是缺点是扩展比较麻烦,要经常改动图片.还有就是利用多层CSS的叠加实现,但是效果比较生硬,外观 ...

  6. Echarts数据可视化tooltip提示框,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  7. echarts中tooltip提示框位置控制

    关键代码: position: function(point, params, dom, rect, size) { //其中point为当前鼠标的位置,size中有两个属性:viewSize和con ...

  8. MFC中添加ToolTip提示框

    PART 1 MFC 对话框中的 Buttton添加提示 例如我们想在一个对话框中的一个button控件添加tooltip,实现的方法如下: 1. 在该对话框的类中添加一个CToolTipCtrl类型 ...

  9. echarts自定义tooltip提示框内容

    1.echarts自定义tooltip提示框内容 https://blog.csdn.net/dreamsup/article/details/56667330 2.关于Echarts的formatt ...

随机推荐

  1. mysqlbinlog工具的作用是什么呢,如何将binary log转换为文本格式?

    需求描述: 今天在看mysqlbinlog这个工具,就在想这个工具到底是干嘛的呢,在mysql数据库中, binary log中记录了数据库内容的变化或者说修改,这些修改是以二进制的方式存储到 bin ...

  2. ubuntu zip解压

    您好,zip xx.zip压缩,unzip xx.zip 解压,tar zcvf xx.tar.gz压缩tar zxvf xx.tar.gz解压

  3. POJ 3093 Margaritas(Kind of wine) on the River Walk (背包方案统计)

    题目 Description One of the more popular activities in San Antonio is to enjoy margaritas in the park ...

  4. ionic creator(ionic生成器)

    用来生成前端 html 还是挺方便的(接口数据另算),弄好就可以直接下载 https://creator.ionic.io/app/dashboard/projects

  5. ExtJS 6.2 基础使用

    一. 安装: 下载两个压缩包:分别是 ext-6.2.0-gpl(这个是ExtJS 的SDK文件,创建新项目的时候需要用). SenchaCmd-6.5.2-windows-64bit (这个下载下来 ...

  6. Oracle 11G Client 客户端安装步骤(图文详解)

    http://www.cnblogs.com/jiguixin/archive/2011/09/09/2172672.html 下载地址: http://download.oracle.com/otn ...

  7. tp5 集成 layui富文本编辑器

    编辑器地址:http://www.layui.com/doc/modules/layedit.html 一睹芳容 1 去官网:http://www.layui.com/     下载layui ├─c ...

  8. nginx代理学习

    一.windows下nginx代理ftp服务器 我所在的开发环境里,nginx和ftp在同一台服务器. ftp根目录: nginx的配置: 在nginx.conf中加入: server { liste ...

  9. Dell、IBM服务器配置远程管理卡

    author: headsen  chen date: 2018-10-09 14:12:32 1,IBM的服务器: 需要在bios里边进行配置,具体配置如下: , 开机画面过完之后,按F1进入bio ...

  10. strace命令的使用

    author: headsen  chen date: 2018-08-28   21:25:48 跟踪一个命令的过程: [root@zabbix-test ~]# yum -y install st ...