jQuery简单实用的tooltip插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款简单实用的jQuery tooltip插件。该tooltip插件提供很多参数让你可以控制tooltip的位置、大小、内容和动画等属性，并且还可以设置tooltip的倒计时消失效果，既简单有非常的实用。

使用方法

首先要在页面中引入jQuery、tooltip.js和tooltip.css文件。

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/tooltip.css" rel="stylesheet">
<script src="/path/to/tooltip.js"></script>

初始化插件

可以通过$.fn.tooltip方法来初始化该tooltip插件。

// 带配置参数
$('body').tooltip({
  autoshow: true,
  content: 'Hello, world!'
});

// 方法
$('body').tooltip('show', 'Hello, world!');

配置参数

// 设置tooltip的参数
$().tooltip(options);

// 修改全局默认参数
$.fn.tooltip.setDefaults(options);

autohide：类型：Boolean，默认值：true。在指定的时间后隐藏tooltip。必须设置duration选项。
autoshow：类型：Boolean，默认值：true。在初始化的时候自动显示tooltip。content必须被设置。
content：类型：String，默认值：''。Tooltip的内容。
countdown：类型：Boolean，默认值：false。是否显示倒计数。duration参数必须被设置。
dismissible：类型：Boolean，默认值：false。是否允许在tooltip自动关闭前点击关闭按钮来关闭它。
duration：类型：Number，默认值：3000。定义tooltip显示的时间。
fixed：类型：Boolean，默认值：true。是否将tooltip设置为固定位置（仅在body元素中有效）。
offset：类型：Number，默认值：10。tooltip相对于它的父元素的偏移。
position：类型：String，默认值：center top。可选值有：'left top'、'center top'、'right top'、'left middle'、'center middle'、'right middle'、'left bottom'、'center bottom'、'right bottom'。tooltip的位置。
style：类型：String，默认值：'default'。可选值：'default'、'primary'、'success'、'info'、'warning'、'danger'。tooltip的样式。
zIndex：类型：Number，默认值：1024。tooltip的z-index。

方法

$().tooltip('method', argument1, , argument2, ..., argumentN)

show([content[, options]])

content (可选):类型Object，tooltip的内容。
options (可选):类型String，tooltip的参数选项。

使用新的内容来显示tooltip:

$().tooltip('show', 'Hello, world!');
$().tooltip('show', 'Hello, world!', {
  style: 'primary',
  zIndex: 2048
});

hide()

隐藏tooltip。

destroy()

销毁tooltip对象。

事件

show.tooltip

当show实例方法被调用的时候show.tooltip事件立刻被触发。

shown.tooltip

当tooltip可见时该事件被触发（会等到CSS transitions完成）。

hide.tooltip

当隐藏tooltip实例的方法被调用时会立刻触发该事件。

hidden.tooltip

当tooltip不可见时该事件被触发（会等到CSS transitions完成）。

No conflict

如果你已经使用了具有相同命名空间的其它插件，可以使用$.fn.tooltip.noConflict方法来恢复它。

<script src="other-plugin.js"></script>
<script src="tooltip.js"></script>
<script>
  $.fn.tooltip.noConflict();
  // Code that uses other plugin's "$().tooltip" can follow here.
</script>