Tooltip提示框使用$.fn.tooltip.defaults重写默认值对象,当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。
通过html标签创建提示框,给元素添加一个"easyui-tooltip"的类名,无需任何Javascript代码,具体代码如下:
<a href="#" title="欢迎收藏www.yoodb.com网站!!!" class="easyui-tooltip">鼠标悬停到这里</a>
利用Javascript创建提示框,具体代码如下:
<a id="yoodb" href="javascript:void(0)">鼠标点击这里</a> $('#yoodb').tooltip({ position: 'right', content: '<span style="color:#fff">欢迎收藏www.yoodb.com网站!!!</span>', onShow: function(){ $(this).tooltip('tip').css({ backgroundColor: '#666', borderColor: '#666' }); }});
参数含义具体如下:
position 消息框位置。可用值有:"left","right","top","bottom",默认值为bottom
content 消息框内容,默认值为null
trackMouse 为true时,允许提示框跟着鼠标移动,默认值为false
deltaX 水平方向提示框的位置,默认值为0
deltaY 垂直方向提示框的位置,默认值为0
showEvent 当激发什么事件的时候显示提示框,默认值为mouseenter
hideEvent 当激发什么事件的时候隐藏提示框,默认值为mouseleave
showDelay 延时多少秒显示提示框,默认值为200
hideDelay 延时多少秒隐藏提示框,默认值为100