qTip2 Core

@author YHC

核心选项:

id:false

概述:

一个唯一的字符串,定义qTip's的id属性的值,这样做可以很容易识别在DOM文本中的qTip,这个属性的前缀是'ui-tooltip-'.

示例:

这个qTip将分配一个id的值为"ui-tooltip-myTooltip"

$('.selector').qtip({
	id: 'myTooltip',
	content: {
		text: 'My ID is #ui-tooltip-myTooltip'
	}
});

注意:1默认值是一个惟一的正整数;

2值必须唯一和不能包含特殊字符;

prerender:false

概述:

默认qTip's渲染在第一次触发show事件的时候,而不是页面加载的时候,设置这个属性为true,将会使qTip's在页面加载的时候创建

示例:

创建一个简单的qTip,并在页面加载的时候就创建

$('.selector').qtip({
	prerender: true,
	content: {
		text: 'My simple tooltip'
	}
});

注意:设置这个为true,会增加页面加载的时间;

overwrite:true

概述:

解决如果.qtip() 在某一个元素上改方法已经被调用和qTip已经出现,新的一个qTip会覆盖(例如 destroy)旧的qTip,这个的默认值是true;

示例:

创建一个qTip,并不会覆盖(detory)之前的qTip,但是会毫无声息的失败:

  /**
    第一个qTip
    **/
  $('#tip').qtip({
	content: {
		text: 'before!!'
	}
});
 
/*
 * 第二个 qTip   -这个什么也不做, 我们指示这个
    不要覆盖之前的qTip元素
 */
$('#tip').qtip({
	overwrite: false,
	content: {
		text: 'You won\'t see me... boo!'
	}
});

注意:当使用Live委托事件选项时,这个选项要设置为false

suppress:true

概述:

解决是否默认的浏览器提示抑制了选择元素,当qTip创建的时候,抑制可以通过重命名title属性,来替换元素的老的标题;

jQuery.attr()方法被重载,允许在不修改当前的代码的情况之下提取标题.通过返回'oldtitle',当请求元素'title'属性,qTip已经出现和抑制可用.

jQuery .clone()也被重载,返回克隆元素,且qTip已经出现和它的标题属性是合法已经完整的,然而如果你克隆的元素element(s),第一个参数

传入true(从而克隆的不仅仅只是元素,也有所有的数据在其中),原来的'oldtitle'属性会保留,和不会返回原来的标题('title')属性;

示例:

创建一个qTip在元素被点击的时候显示,不抑制常规浏览器的提示(例如div title属性设置之后就会有默认的title提示),允许作为一个指示:

  $('#tip').qtip({
	suppress: false,
	content: {
		text: 'You must have known to click me from the browser tooltip...!?'
	},
	show: {
		event: 'click'
	}
})
.attr('title', 'Click me to show a qTip!'); //应用这个标题属性到元素上

以上最好用div做测试例子,效果更明显;

注意:当你创建qTip它不会触发onmouseover/out,这个选项是最有的;

metadata:{styel:'class'}

如果你碰巧使用了jQuery Metadata plugin在你的网页上,你可以使用它提供选项,在每一个元素基础上提示,当调用通过qTip时,这个选项对象决定metadata plugins选项;

示例:

让我们设置一些元素,和通过一个自定义标签定制元数据:

<div qtipOpts="{ style: { classes: 'ui-tooltip-blue' } }"><b>Hover me</b> to see a blue tooltip</div>
<div qtipOpts="{ show: { event: 'click' } }"><b>Click me</b> to show a regular tooltip</div>

现在我们附加上一些提示,和搜索选项中的qtipOpts 属性

$('div[qtipOpts]').qtip({
	metadata: {
		type: 'attr',
		name: 'qtipOpts'
	},
	content: 'I might look different from all the other tooltips generated by the same .qtip() call...'
});

你也可以使用新的HTML5 data-*属性类似的方法设置你的数据,比如:

// 该元素的 data-qtipopts 定义一个可用的选项对象,自动合并到.qtip()调用选项

<div data-qtipopts="{ style: { classes: 'ui-tooltip-green' } }"><b>Hover me</b> to see a green tooltip</div>

然后指定HTML5作为你的元数据类型,接着指定你的data属性的名字(连字符(-)之后的字符)

$('div[qtipOpts]').qtip({
	metadata: {
		type: 'html5', // Use HTML5 data-* attributes
		name: 'qtipopts' // Grab the metadata from the data-qtipOpts HTML5 attribute
	},
	content: 'I\'m using HTML5 to set my style... so so trendy.'
});

@author YHC click me!
注意:HTML5 data:确保没有使用data-qtip作为你的存储位置,因为它会干扰到qTip,例如jQuery1.4.3!点击这里查看为什么?

对于其他更多信息,和其他元数据选项,请见Metadata Documentation.

原文地址

以上如果有错误的地方,还请大家指正,thanks!