tooltip（提示框）组件

Posted 2022-09-15 alaic2052243080

一、class加载方式

  <span id="pos" class="easyui-tooltip" title="这是提示内容">内容</span>

二、js加载方式

   $("#pos").tooltip(

      //属性
　　　　content:‘<strong>这是内容提示框</strong>‘, //消息框内容,识别html标签,默认为 null,值为string
　　　　position:‘bottom‘, //消息框位置。left/right/top/bottom 默认 bottom,值为string
　　　　trackMouse:true, // 允许提示框跟随鼠标移动, 默认为false,值为 boolean
　　　　deltaX:100, //水平方向提示框的位置。默认为 0,值为 number
　　　　deltaY:20, //垂直方向提示框的位置。默认为 0,值为 number
　　　　showDelay:1000, //延时多少秒显示提示框。默认 200,值为 number
　　　　hideDelay:1000, //延时多少秒隐藏提示框。默认 100,值为 number
　　　　//showEvent:‘click‘,//当激活事件的时候显示提示框,默认为 mouseenter,值为string
　　　　//hideEvent:‘dblclick‘,// 当激活事件的时候显示提示框,默认为 mouseleave ,值为string
　　//事件
　　　　onShow : function (e)
　　　　console.log($(‘#pos‘).tooltip(‘tip‘));//返回 tip 元素对象,传参none
　　　　console.log($(‘#pos‘).tooltip(‘arrow‘));//返回箭头元素对象,传参none
　　　　, //在显示提示框的时候触发,传参为e
　　　　onHide : function (e) , //在隐藏提示框的时候触发,传参为e
　　　　onUpdate :function (content)
　　　　alert("内容改变为"+content)
　　　　,//在提示框内容更新的时候触发,传参为content
　　　　//onPosition:function (left,top)
　　　　//console.log(‘left:‘ + left + ‘,top:‘ + top);
　　　　// ,//在提示框位置改变的时候触发,传参 left、top
　　　　onDestroy:function () ,// 在提示框被销毁的时候触发,传参none
　　　　// onShow : function(e)
　　　　// $(‘.tooltip-right‘).css(‘left‘, 500);
　　　　// ,
　　　　// onHide : function (e)
　　　　// $(‘#pos‘).tooltip(‘reposition‘);//重置工具栏位置
　　　　//
);
　　//方法
　　　　$("#pos").click(function ()
　　　　// $(this).tooltip("update","<strong>这是内容提示框</strong>");
　　　　$(this).tooltip("destroy");
　　　　);
　　　　console.log($(‘#pos‘).tooltip(‘options‘));//返回属性对象,传参none
　　　　//$(‘#pos‘).tooltip(‘show‘);//显示提示框,传参为e
　　　　//$(‘#pos‘).tooltip(‘hide‘);//隐藏提示框,传参为e
　　　　//$(‘#box‘).tooltip(‘destroy‘);//销毁提示框,传参none
　　　　//$(‘#box‘).tooltip(‘update‘, ‘更新提示内容‘);//更新content内容