Tooltip 提示框组件

可独立于其他组件
通过$.fn.tooltip.defaults重写默认的defaults。
当用户移动鼠标指针在某个元素上时，出现提示信息窗口来显示额外信息。提示内容可以包含任何来自页面的或者通过ajax生成的html元素。

1、创建提示框
从标记创建提示框（tooltip），添加‘easyui-tooltip’ class到元素，不需要任何的javascript代码
<a href="#" title="This is the tooltip message." class="rasyui-tooltip">Hover me</a>

使用js创建提示框（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"
});
}
});

2、属性
position string 提示框（tooltip）位置。可能的值：‘left’，‘right’，‘top’，‘bottom’ bottom
content string 提示框（tooltip）内容,可以放html标签 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

3、事件
onShow e 当显示提示框（tooltip）时触发
onHide e 当隐藏提示框（tooltip）时触发
onUpdate content 当提示框（tooltip）内容更新时触发
onPosition left，top 当提示框（tooltip）位置更改时触发
onDestory none 当提示框（tooltip）销毁时触发

4、方法
options none 返回选项（options）属性（property）
tip none 返回提示（tip）对象
arrow none 返回箭头（arrow）对象
show e 显示提示框（tooltip）
hide e 隐藏提示框（tooltip）
update content 更新提示框（tooltip）内容
reposition none 重置提示框（tooltip）位置
destory none 销毁提示框（tooltip）

<html>

<title>index</title>

<head>

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

    <div style="width:400px;height:400px; margin-left:400px; margin-top:100px;">

        <!--

        <a href="javascript:void(0)" title="This is the tooltip message" class="easyui-tooltip">Hover me</a>

        -->

        <a id="box" href="javascript:void(0)">Hover me</a>

    </div>

</body>

</html>

$(function(){

    $.fn.tooltip.defaults.trackMouse = true;

    $("#box").tooltip({

        //position : "right",

        content : "<strong>this is comment!</strong>",

        //trackMouse : true,

        //deltaX : 30,

        //deltaY : 30,

        //showEvent : "click", //单击

        //hideEvent : "dblclick", //双击

        //showDelay : 1500, //单位毫秒

        //hideDelay : 1500,

        //onShow : function(e){

            //console.log("提示框显示");

            //console.log($("#box").tooltip('tip'));

            //console.log($("#box").tooltip('arrow'));

            //$(".tooltip-bottom").css('left',900);

        //},

        //onHide : function(e){

            //console.log("提示框隐藏");

        //},

        //onPosition : function(left , top){

            //console.log("提示框移动");

        //},

        onDestory : function(e){

            console.log("提示框销毁");

        },

        //onUpdate : function(content){

            //console.log("新的提示框内容：" + content);

        //}

    });

    //$("#box").click(function(){

        //$(this).tooltip('update','改变了');

    //});

    //$("#box").click(function(){

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

        //$(this).tooltip('destory');

    //});

    //console.log($("#box").tooltip("options"));

    //$("#box").tooltip("show");

    //$("#box").tooltip("hide");

});

我使用$("#box").tooltip('destory');销毁提示框的时候总是报错

tooltip提示框组件的更多相关文章

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

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

  2. Tooltip(提示框)组件

    一．加载方式 //class加载方式 <a href="http://www.ycku.com" title="这是一个提示信息!" class=&quo ...

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

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

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

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

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

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

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

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

  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. dubbo-admin 监控中心 部署

    dubbo-admin部署 下载: GitHub:https://github.com/search?q=dubbo-admin 百度网盘: 链接:https://pan.baidu.com/s/1v ...

  2. C++文件操作：打开文件和写入文件

    如果程序的运行结果仅仅显示在屏幕上,当要再次查看结果时,必须将程序重新运行一遍:而且,这个结果也不能被保留. 如果希望程序的运行结果能够永久保留下来,供随时查阅或取用,则需要将其保存在文件中. 文件分 ...

  3. PHP+MySQL数据库编程的步骤

    第一步:PHP连接MySQL服务器 第二步:选择当前要操作的数据库 第三步:设置请求或返回的数据的字符集 第四步:执行各种SQL语句. PHP连接MySQL服务器 1.mysql_connect() ...

  4. 20145313 《Java程序设计》第十周学习总结

    网络编程 网络编程就是在两个或两个以上的设备(例如计算机)之间传输数据.程序员所作的事情就是把数据发送到指定的位置,或者接收到指定的数据,这个就是狭义的网络编程范畴.在发送和接收数据时,大部分的程序设 ...

  5. 20145314郑凯杰 《Java程序设计》实验四 实验报告

    20145314郑凯杰 <Java程序设计>实验四 实验报告 实验要求 完成实验.撰写实验报告,实验报告以博客方式发表在博客园,注意实验报告重点是运行结果,遇到的问题(工具查找,安装,使用 ...

  6. 20145322 《Java程序设计》第7周学习总结

    20145322何志威 <Java程序设计>第7周学习总结 教材学习内容总结 第十二章 如果使用JDK8的话,可以使用Lambda特性去除重复的信息. 在只有Lambda表达式的情况下,参 ...

  7. <linux/init.h>，<linux/module.h>头文件不存在等问题的解决方法

    这个问题真心是处理了一个下午,还自己去下载了个最新的内核拿来编译,其实是完全没必要的,因为ubuntu系统是可以直接下载新内核的. 你可以在/usr/src/文件夹下找到这些内核文件夹,比如说我自己的 ...

  8. arm-linux工具

    arm-linux工具的功能如下: arm-linux-addr2line 把程序地址转换为文件名和行号.在命令行中给它一个地址和一个可执行文件名,它就会使用这个可执行文件的调试信息指出在给出的地址上 ...

  9. MysQL使用一查询

    简介 查询的基本语法 select * from 表名; from关键字后面写表名,表示数据来源于是这张表 select后面写表中的列名,如果是*表示在结果中显示表中所有列 在select后面的列名部 ...

  10. 4.9版本的linux内核中温度传感器adt7461的驱动源码在哪里

    答:drivers/hwmon/lm90.c,这个文件中支持了好多芯片,内核配置项为CONFIG_SENSORS_LM90 Location: -> Device Drivers -> H ...