tooltip提示框组件

堵德曜
2023-12-01

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');销毁提示框的时候总是报错

 

 类似资料: