佐佑时代

Tooltip（提示框）

使用$.fn.iTooltip.defaults重写默认值对象。


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


使用案例

创建提示框


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

                    Hover me

2. 通过Javascript创建提示框。

                    Click here
                

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

属性
属性名 属性值类型 描述 默认值
position string 消息框位置。可用值有："left","right","top","bottom" bottom
content string,function 消息框内容。
代码示例：
                           $('#tt').iTooltip({
                                content: 'This is the tooltip message.'
                            });
                            $('#tt').iTooltip({
                                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 销毁提示框。