这是一款简单实用的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>                
              

浏览器兼容

  • Chrome (latest 2)
  • Firefox (latest 2)
  • Internet Explorer 8+
  • Opera (latest 2)
  • Safari (latest 2)