easyUI tootip组件使用：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

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

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

    <script src="js/test006.js"></script>

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

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

</head>

<body style="margin:20px">

    <a class="easyui-tooltip" herf="#" title="this is title">hover on</a>

    <a href="#" id="box">hover 2 on</a>

    <div id="pox" style="border: 1px solid #ccc;width:200px;height:200px">div hover 2 on</div>

</body>

</html>
$(function(argument) {

    var obj = {

        content: '<strong>this is content</strong>', //tooltip显示的内容，支持html语法

        // position:'top',//toptip显示的位置；

        trackMouse: true, //追踪鼠标位置,如果position是top，跟踪鼠标的时候可能会使位置变成bottom；

        // deltaX: 100, //与鼠标x轴方向的偏移

        // deltaY: 100,

        // showDelay: 1500, //显示的延迟时间

        // hideDelay: 1500,

        // showEvent:'click',//显示tooltip的事件

        // hideEvent:'dblclick',//隐藏tooltip的事件,dblclick-双击隐藏

        onShow: function(e) {

            console.log('onShow');

            console.log($(this).tooltip('options')); //获得options对象

            console.log($(this).tooltip('tip')); //获得tip对象

            console.log($(this).tooltip('arrow')); //获得arrow对象

            $(this).tooltip('hide'); //隐藏

            $(this).tooltip('show'); //显示

            $(this).tooltip('update', 'this is update content'); //更新content内容；

            $(this).tooltip('reposition');

            // $(this).tooltip('destroy'); //销毁tooltip对象

        },

        onHide: function(e) {

            console.log('onHide');

        },

        onUpdate: function(e) {

            console.log('onUpdate');

        },

        onPosition: function(left, top) {

            console.log('onPosition');

            console.log('left:' + left + ";top:" + top);

        },

        onDestroy: function(e) {

            console.log('onDestroy');

        }

    };

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

    $('#pox').tooltip(obj);

});

easyUI tootip组件使用的更多相关文章

  1. Easyui主要组件用法

    Easyui主要组件用法说明: 1.  combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...

  2. Easyui部分组件讲解

    Easyui部分组件讲解 目  录 1.... Accordion(可折叠标签)... 2 1.1          实例... 2 1.2          参数... 3 2.... DateBo ...

  3. 对easyui datagrid组件的一个小改进

    #对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...

  4. easyUI panel组件

    easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. easyUI progressbar组件

    easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. easyUI linkbutton组件

    easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...

  7. easyUI resizable组件使用

    easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. easyUI droppable组件使用

    easyUI droppable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. easyUI draggable组件使用

    easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

随机推荐

  1. oracle 日期相减

    oracle日期相减2012-02-10 12:18--MONTHS_BETWEEN(date2,date1) 给出date2-date1的月份 SQL> select months_betwe ...

  2. ICE异步程序设计-----AMI/AMD

    1 简介 AMI 异步方法调用(AMI) 这个术语描述的是客户端的异步编程模型支持. 如果你使用AMI 发出远地调用,在Ice run time 等待答复的同时,发出调用的线程不会阻塞.相反,发出调用 ...

  3. 首页布局时div的宽度设置要注意

  4. Xcode制作插件

    转发至:https://onevcat.com/2013/02/xcode-plugin/ Xcode 4 插件制作入门 本文欢迎转载,但烦请保留此行出处信息:http://www.onevcat.c ...

  5. javascript 函数 add(1)(2)(3)(4)实现无限极累加 —— 一步一步原理解析

    问题:我们有一个需求,用js 实现一个无限极累加的函数, 形如 add(1) //=> 1; add(1)(2)  //=> 2; add(1)(2)(3) //=>  6; add ...

  6. JAV基础语法之---数据类型转换

    数制转换": 1.string 转 byte[] String str = "Hello";byte[] srtbyte = str.getBytes(); 2.byte ...

  7. SQLite Lemon 语法分析器学习与使用

    本文是浙江大学出版社的<LEMON语法分析生成器(LALR 1类型)源代码情景分析>学习笔记. 用到的Windows下的编译器介绍MinGW(http://www.mingw.org/): ...

  8. Nginx 中 nginx.conf 详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  9. android MessageQueue入门

    接触安卓几年了.但是感觉一直不是很明白,东西太多了.反过来说就是自己太菜了.很多东西其实都是模凌两可,不熟悉,很多知识点都是知道一点,最多大家都这样用.没问题,事件长了也一直这样用的.但是有个问题,安 ...

  10. P4语言编程快速开始 实践二

    参考:P4语言编程快速开始 上一篇系列博客:P4语言编程快速开始 实践二 Demo 2 本Demo所做的修改及实现的功能: 为simple_router添加一个计数器(counter),该计数器附加( ...