Tooltip（提示框）

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

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

用法

html

<a href="#" title="This is the tooltip message." data-toggle="topjui-tooltip">Hover me</a>

2. 通过Javascript创建提示框。

html

<a id="dd" href="javascript:void(0)">Click here</a>

javascript

$('#dd').iTooltip({
  position: 'right',
  content: '<span style="color:#fff">This is the tooltip message.</span>',
  onShow: function(){
    $(this).iTooltip('tip').css({
      backgroundColor: '#666',
      borderColor: '#666',
    });
  }
});

属性

属性名	属性值类型	描述	默认值
position	string	消息框位置。可用值有："left","right","top","bottom"	bottom
content	string,function	消息框内容。见下方代码示例。	null
trackMouse	boolean	为true时，允许提示框跟着鼠标移动。	false

属性代码示例

content属性示例：

javascript

$('#tt').iTooltip({ content: 'This is the tooltip message.' });

javascript

$('#tt').iTooltip({ content: function(){ return '<div>...</div>'; } });

事件

事件名	事件参数	描述
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	销毁提示框。

Tooltip（提示框） ​

用法 ​

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

2. 通过Javascript创建提示框。 ​

属性 ​

属性代码示例 ​

事件 ​

方法 ​

用法

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

2. 通过Javascript创建提示框。

属性

属性代码示例

事件

方法