<!DOCTYPE html>

    <html>

    <head>

    <title>jQuery Easy UI</title>

    <meta charset="UTF-8" />

    <script type="text/javascript" src="easyui/jquery.min.js"></script>

    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>

    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script>

    <script type="text/javascript" src="js/index.js"></script>

    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" />

    </head>

    <body>

        <a href="##" id="box">toolTip</a>

    </body>

    </html>  
    $(function () {

        $('#box').tooltip({

            content : 'fghjkl',//提示的内容

            position:'top' //消息框的位置left top bottom

            trackMouse:true //允许提示框跟着鼠标移动

            deltaX: //水平方向提示框位置

            deldaY: //竖直方向提示框位置

            showEvent:'click'//当激活事件的时候显示提示框

            hideEvent:'dbclick'//当激活事件的时候隐藏提示框

            showDelay:,//延迟多长时间显示

            hideDelay:,//延迟多长事件隐藏  

            onShow: function(e){}//显示的时候触发

            onHide:function(e){}//隐藏的时候触发

            onUpdate:function(e){}//内容更新的时候触发

            onPosition:function(left,top){}//改变位置的时候触发

            onDestroy:function(none){}//被销毁的时候触发

    });  

    //返回属性对象

    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', );

    },  

    onHide : function (e) {

        $('#box').tooltip('reposition');

    },  

    $.fn.tooltip.defaults.position = 'top';

使用$.fn.tooltip.defaults重写默认值对象。（译者注：1.3.3版中新增的plugin）

当用户将鼠标移动到元素上的时候，将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。

使用案例：

创建提示框

通过标签和Javascript两种方法来创建提示框。

1、通过标签创建提示框，给元素添加一个”easyui-tooltip”的类名，无需任何Javascript代码。

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

2. 通过Javascript创建提示框。

<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′

		});

	}

});

属性：

事件：

方法：

jQuery EasyUI 教程-Tooltip（提示框）的更多相关文章

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

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

  2. Jquery easyui 教程

            Jquery easyui教程                 目  录 1基本拖放... 4 2构建购物车型拖放... 5 3创建课程表... 8 4菜单和按钮Menu and Bu ...

  3. tooltip提示框组件

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

  4. 第二百一十一节，jQuery EasyUI，ValidateBox(验证框)组件

    jQuery EasyUI,ValidateBox(验证框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 4.自定义验证 本节课重点了解 EasyUI 中 ValidateBox(验证框 ...

  5. 第二百一十节，jQuery EasyUI，SearchBox(搜索框)组件

    jQuery EasyUI,SearchBox(搜索框)组件 学习要点: 1.加载方式 2.属性列表 3.方法列表 本节课重点了解 EasyUI 中 SearchBox(搜索框)组件的使用方法,这个组 ...

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

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

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

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

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

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

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

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

随机推荐

  1. [leetcode DP]63. Unique Paths II

    Follow up for "Unique Paths": Now consider if some obstacles are added to the grids. How m ...

  2. [leetcode tree]102. Binary Tree Level Order Traversal

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  3. Highmaps网页图表教程之Highmaps第一个实例与图表构成

    Highmaps网页图表教程之Highmaps第一个实例与图表构成 Highmaps第一个实例 下面我们来实现本教程的第一个Highmaps实例. [实例1-1:hellomap]下面来制作一个中国地 ...

  4. [ 转载 ] Java基础4--Java中的static关键字解析

    Java中的static关键字解析 static关键字是很多朋友在编写代码和阅读代码时碰到的比较难以理解的一个关键字,也是各大公司的面试官喜欢在面试时问到的知识点之一.下面就先讲述一下static关键 ...

  5. Linux嵌入式文件系统（网络文件系统）

    <文件系统定义> 怎么将文件和文件目录加载到linux内核中,这一种加载的方式就叫做文件系统 <建立根文件系统目录和文件> <创建目录> 1)在linux系统中使用 ...

  6. 在线HTTP速度测试(响应时间测试)及浏览器兼容测试

    一.前言 网站的响应时间,是判断一个网站是否是好网站的重要的因素之一.百度首页的响应时间在全国各个省份小于10ms.这个响应时间远远好于竞争对手.根据美丽说的技术负责人分析,美丽说访问速度提升10%, ...

  7. bzoj 2178

    这题调精度真痛苦啊(向管理员要了数据才调出来). 用的是hwd在WC2015上讲的方法,考虑将原图分割,根据每个圆的左右边界和圆与圆交点的横坐标来分割,这样原图就被分成很多竖着的长条,并且每一条中间都 ...

  8. An ac a day,keep wa away

    zoj 初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 1334 ...

  9. PPT文化

    PPT文化,yes or no? 知识是有体系的,有的时候刚接触的时候可以 推导技术 ,汇报.吹牛都可以应用上,并且可以让别人想想. 但是实际应用技术,就需要涉及很多详细的技术细节,如果少掉一个看似极 ...

  10. Complete list of APDU responses

    https://www.eftlab.com.au/index.php/site-map/knowledge-base/118-apdu-response-list List of APDU resp ...