通过 $.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. jquery把int类型转换成字符串类型的方法

    jQuery中把获取的number类型数据转换成字符串类型 var val=$(“#id).val(); If(typeof val==”number”){ val+=' '; }

  2. MathType使用中的四个小技巧

    MathType是一种比较常见的数学公式编辑器,常常与office搭配着使用,我们在使用的时候有一些要注意的小技巧,下面我们就来给大家介绍介绍MathType使用中的四个小技巧? 技巧一:调整工具栏显 ...

  3. java jdk-awt.font在centos上中文乱码的问题, 安装中文字体

    有需求生成一个二维码,并且有一段文本说明,但是使用awt.font来生成中文时,一直存在乱码的问题.网上的解决办法有几种,但是在centos上亲测有用的就是如下的方法. Java代码如下:new ja ...

  4. ubuntu网络配置命令

    Ubuntu网络配置例如: (1) 配置eth0的IP地址, 同时激活该设备. #ifconfig eth0 192.168.1.10 netmask 255.255.255.0 up (2) 配置e ...

  5. Appium - WebView測试(Android)

    Appium - WebView測试 作者: Max.Bai 时间: 2015/07 Appium - WebView測试(Android) 如今App都是混合型的.有原生的也包括WebView的,a ...

  6. PHP代码审计 -1.SQL注入总结

    0x01 背景          最近在学习PHP代码审计,这里做一个SQL注入总结,是对自己学习知识的总结,也是为自己学习的笔记,方便自己反复翻阅. 0x02 PHP代码审计-SQL注入 挖掘SQL ...

  7. DEMO6:坐标添加文字标签的JavaScript插件

    Google地图API   MarkerWithLabel Example http://google-maps-utility-library-v3.googlecode.com/svn/tags/ ...

  8. 新唐M0 M4系统初始化

    系统初始化包含了时钟(clock)初始化和多功能引脚(Multi Function Pin 简称MFP寄存器)配置.void SYS_Init(void) { /* 解锁保护寄存器 */ SYS_Un ...

  9. Swift-Debug下打印函数名和行数

    1.Build Settings ->搜索 Swift compiler -> OTHER_SWIFT_FLAGS = -D DEBUG 2.设置DEBUG函数 配置好后就可以愉快的进行调 ...

  10. 谷歌Volley网络框架讲解——HttpStack及其实现类

    前两篇已经对网络请求流程已经梳理了个大概,这次我们着重看一下HttpStack和它的其实现类.我们之前在Network篇讲过它仅有一个实现类,而今天我们讲的HttpStack有两个实现类. 其中Htt ...