qTip2 Content

@author YHC

text:true

概述:

text/HTML将出现在qTip初始化之后,如果设置为true(e.g.:text:true),将会使用目标元素的标题属性(e.g.:<div title='why LOVE HC?')做为提示信息显示,前提是目标元素标题可用

也可以定义一个匿名函数来返回提示内容,他的范围是目标元素;

示例:

创建一个默认的qTip,并且提示内容是"My tooltip content"

$('.selector').qtip({
	content: {
		text: 'My tooltip content'
	}
});

我们也使用其他的jQuery元素来作为它的提示内容

$('.selector').qtip({
	content: {
		text: $('.selector2') // Add .clone() 如果你不想匹配的元素被移除,可以使用clone
	}
});

我们也可以使用自定义函数来检索目标元素的特殊属性,作为提示信息

$('.selector').qtip({
	content: {
		text: function(api) {
			// 检索$('.selector')元素的自定义属性,作为提示信息
			return $(this).attr('qtip-content');
		}
	}
});

注意:自定义函数如果返回的是无效的内容,任然会影响到qTip的创建,替换这些each()循环,如果不是你期望的行为;

如果这两个属性检测到无效内容,和下面的content.attr选项将不会渲染qTip提示信息;

attr:'title'

概述:

目标元素的属性作为提示信息,如果没有提供或者有无效的内容被发现将会使用上面的content.text选项;

示例:

让我们创建一个qTip,来给所有的图片做提示,他的提示内容来自img的alt属性:

$('img[alt]').qtip({
	content: {
		attr: 'alt'
	}
});

这个对图片类和图片站点导航非常有用的,和他们需要良好的视觉线索和上下文;

注意:如果在元素属性中发现无效内容而且content.text没有定义那么将没有qTip渲染到页面;

title.text:false
概述:

text/html 将出现在标题元素里面的内容,如果设置false,没有title被创建,一个匿名的函数也可以用来返回title元素的内容,他的范围是目标元素;

示例:

创建一个 'About me'的提示信息和一个标题来指明内容是关于什么的:

$('.selector').qtip({
	content: {
		text: 'I really like owls!',
		title: {
			text: 'About me'
		}
	}
});

我们也可以使用其他的jQuery的元素来作为qTip的title

$('.selector').qtip({
	content: {
		title: {
			text: $('.selector2') // Add .clone() if you don't want the matched elements to be removed, but simply copied
		}
	}
});

我们也可以使用一个自定义函数来返回title内容

$('.selector').qtip({
	content: {
		text: 'Custom title text functions... hoorah!',
		title: {
			text: function(api) {
				// Retrieve content from ALT attribute of the $('.selector') element
				return $(this).attr('alt');
			}
		}
	}
});

注意:自定义函数返回的是无效内容的时候仍然会影响到qTip的创建,替换这些each()循环,如果不是你期望的行为的时候;

如果提供的是无效的内容,title将不会创建;

title.button:false

概述:

text/HTML将出现在标题内部的按钮元素,(e.g.close link)位于title元素内容的右边.当你点击的按钮的时候这个按钮将关闭提示信息,

示例:

创建另一个'About me'的提示信息,开启点击,当你点击按钮的时候仅仅只是隐藏起来,

$('.selector').qtip({
	content: {
		text: 'I really like owls!',
		title: {
			text: 'About me',
			button: 'Close'
		}
	},
	hide: {
		event: false
	}
});

你也可以设置这个属性为true,他会默认创建一个格式化按钮;

注意:button属性仅仅只是在title属性被定义和title.text被定义而且可用的时候出现;

如果提供的是无效的内容,button将不会被创建;

ajax:Object

概述

定义qTip的ajax属性内容,请见plugin documentation这里的信息更为详细;

@author YHC 查看原文内容

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