Tooltip(提示框)

使用$.fn.tooltip.defaults重写默认值对象。(译者注:1.3.3版中新增的plugin)


当用户将鼠标移动到元素上的时候,将会显示一个消息提示框。提示框的内容可以是页面中任何一个HTML元素或者通过Ajax发送后台请求以获取提示框内容。


创建提示框


1. 通过标签创建提示框,给元素添加一个"easyui-tooltip"的类名,无需任何Javascript代码。

2. 通过Javascript创建提示框。

                    $('#dd').tooltip({
                        position: 'right',
                        content: 'This is the tooltip message.',
                        onShow: function(){
                                $(this).tooltip('tip').css({
                                    backgroundColor: '#666',
                                    borderColor: '#666',
                                });
                        }
                    });
                

属性名 属性值类型 描述 默认值
position string 消息框位置。可用值有:"left","right","top","bottom" bottom
content string,function

消息框内容。能够作为一个返回文本框内容的方法使用

                          $('#tt').tooltip({
	                            content: 'This is the tooltip message.'
                            });
                            $('#tt').tooltip({
                               	content: function(){
                                return '
...
'; } });
null
trackMouse boolean 为true时,允许提示框跟着鼠标移动。 false
deltaX number 水平方向提示框的位置。 0
deltaY number 垂直方向提示框的位置。 0
showEvent string 当激发什么事件的时候显示提示框。 mouseenter
hideEvent string 当激发什么事件的时候隐藏提示框。 mouseleave
showDelay number 延时多少秒显示提示框。 200
hideDelay number 延时多少秒隐藏提示框。 100
事件名 事件参数 描述
onShow e 在显示提示框的时候触发。
onHide e 在隐藏提示框的时候触发。
onUpdate content 在提示框内容更新的时候触发。
onPosition left,top 在提示框位置改变的时候触发。
onDestroy none 在提示框被销毁的时候触发。
方法名 方法参数 描述
options none 返回控件属性对象。
tip none 返回tip元素对象。
arrow none 返回箭头元素对象。
show e 显示提示框。
hide e 隐藏提示框。
update content 更新提示框内容。
reposition none 重置提示框位置。
destroy none 销毁提示框。