@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...' });
// 该元素的 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!
对于其他更多信息,和其他元数据选项,请见Metadata Documentation.
原文地址
以上如果有错误的地方,还请大家指正,thanks!