Tooltip(提示框)组件

来源：互联网发布：简易财务记账软件编辑：程序博客网时间：2024/05/22 15:18

<!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 bottomtrackMouse:true //允许提示框跟着鼠标移动deltaX:0 //水平方向提示框位置deldaY:0 //竖直方向提示框位置showEvent:'click'//当激活事件的时候显示提示框hideEvent:'dbclick'//当激活事件的时候隐藏提示框showDelay:500,//延迟多长时间显示hideDelay:500,//延迟多长事件隐藏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', 500);},onHide : function (e) {    $('#box').tooltip('reposition');},$.fn.tooltip.defaults.position = 'top';

0 0