qTip2 Hide

@author YHC

特殊事件

qTip为你实现了一些自定义的hide和show事件,所以你不需要手动编写代码,现在还只有一个:unfocus,这个事件允许你隐藏qTip当任何qTip被点击的时候:

$('.selector').qtip({
	content: {
		text: 'I\'ll hide when you click anywhere else on the document',
	},
	hide: {
		event: 'unfocus'
	}
});

注意:这个仅仅只是qTip的事件,对任何正常的jQuery的bind/delegate/live,都是不起作用的.

target:false

概述:

决定那个html元素将触发你的hide.event(s)事件,当你设置为false的时候,这个元素的.qtip()方法将根据使用调用

示例:

这个示例将使用第一个H1元素来隐藏qTip,当hide.event事件被触发的时候(在鼠标的情况下)

$('.selector').qtip({
	content: {
		text: 'You hovered over the first H1 element on the document. Well done you!',
	},
	hide: {
		target: $('h1:first')
	}
});

我们也可以使鼠标在多个元素上离开的时候关闭qTip,例如:下面的所有标题元素:

$('.selector').qtip({
	content: {
		text: 'If you mouse over a header element, I\'ll hide!',
	},
	show: {
		ready: true
	},
	hide: {
		target: $('h1, h2, h3, h4')
	}
});

注意:设置多个不同的隐藏目标,并不影响定位,它的控制是通过position.target选项;

event:"mouseleave"

概述:

Event(s)那一个触发qTip的hide事件,所有可用值都记录在jQueryEvent bind()文档中,多个事件以空格隔开是支持的:

示例:

下面的这个例子将是目标元素被点击的时候,使qTip隐藏;

$('.selector').qtip({
	content: {
		text: 'I get hidden on click',
	},
	hide: {
		event: 'click'
	}
});

你也可以定义多个事件使用空格隔开字符串,下面的这个例子当你的目标元素hide.target的click和mouseout事件被触发的时候,将是qTip隐藏;

$('.selector').qtip({
	content: {
		text: 'I get hidden on click or when you mouseout my hide.target',
	},
	hide: {
		event: 'click mouseleave'
	}
});

注意:mouseleave是不冒泡的版本的mouseout,这个是优先选择使用事件

delay:0

概述:

当hide.target目标元素的hide.event事件被触发的时候,通过延时隐藏qTip,时间的单位是millisecond(毫秒 故缩写 ms)

示例:

这个示例是在当你的鼠标在hide.target上离开之后的1000毫秒(1秒)隐藏:

$('.selector').qtip({
	content: {
		text: 'I have a longer delay then default qTips',
	},
	hide: {
		delay: 1000
	}
});

注意:这个的工作原理非常像Brian Chernehoverintent plugin插件;

inactive:false

概述:

时间是以毫秒为单位,在剩余的时间之后它是不活动的,那么应该隐藏该qTip,例如:它们不是互相作用的,如果设置为false,qTip在不活动的时候将不会隐藏;

示例:

让我们创建一个qTip让其点击事件触发之后显示,但是隐藏仅仅只是在不活跃的3秒之后:

$('.selector').qtip({
	content: {
		text: 'I\'ll disappear after three seconds of inactivity... :(',
	},
	show: 'click',
	hide: {
		event: false,
		inactive: 3000
	}
});

注意:在1.0的inactive事件应用是通过hide.event选项,和使用hide.delay定义inactivity所需持续时间;

fixed:false

概述:

当这个选项设置为true的时候,当鼠标离开之后,qTip不会隐藏,允许内容被点击,他们是可交互的;

示例:

创建一个qTip在一个超链接里面,在鼠标离开之后不隐藏:

$('.selector').qtip({
	content: {
		text: $('<a href="http://google.com">Visit Google</a>'),
	},
	hide: {
		fixed: true
	}
});

注意:添加一个hide.delay通常是解决,当这项启用了,并给用户时间,在鼠标离开之前隐藏;

主要是用于结合mouseout和类似的鼠标导航的隐藏事件;

leave:"window":

概述:

附加的隐藏设置允许你定义qTip是否隐藏,当你离开window,它还包含在内,这个选项你必须使用这两个事件的其中之一mouseover或者(其中之一)mouseleave作为你的hide事件;

示例:

这个qTip将不会隐藏,当你的鼠标离开window,例如tab切换到其他的window/tab,或者点击一个超链接打开一个新的window;

$('.selector').qtip({
	content: {
		text: 'I will not hide when you click the link I target (.selector)',
	},
	hide: {
		leave: false
	}
});

注意:这个仅仅只是应用于当你使用mouseover或者mouseout这两个的其中之一作为你的隐藏事件;

distance:false
概述:

这个设置允许你决定距离qTip多少距离之后qTip隐藏,当鼠标移至那个点将触发qTip.这个跟常规浏览器的提示行为很像;

示例:

让我们模仿常规浏览器的提示,通过使用distance选项为鼠标设置:

$('.selector').qtip({
	content: {
		text: 'I behave exactly like a regular browser tooltip',
	},
	position: {
		target: 'mouse', // Position at the mouse...
		adjust: { mouse: false } // ...but don't follow it!
	}
	hide: {
		distance: 15 // Hide it after we move 15 pixels away from the origin
	}
});

注意:这个事件本身可以归类作为一个隐藏选项,鼠标最初在show.target上的位置,决定使用计算距离的坐标;

effect:true

概述:

决定效果类型,他发生在隐藏qTip的时候,你也可以使用一个自定义方法,他的scope是qTip元素,当调用的时候,如果设置为false,没有任何的效果发生:

示例:

让我们创建一个qTip,当隐藏的时候让他滑下,使用自定义animation回调函数:

$('.selector').qtip({
	content: {
		text: 'I slide in when hidden, none of this fading business for me!'
	}
	hide: {
		effect: function(offset) {
			$(this).slideDown(100); // "this" refers to the tooltip
		}
	}
});

注意:默认是fadeOut效果整个发生持续90毫秒;

@author YHC 原文地址

以上均是上班时间写的,由于时间比较紧,如果有错误还请大家提出,thanks!

评论

1 楼 yuzhou629 2012-08-28  

总结的很全面，受益了。
鼠标离开弹出的气泡后隐藏貌似不行，鼠标一移离对象，气泡就消失了。
我想在气泡里放几个按钮供用户点击，使用click或者 button都需要手动操作下，比较麻烦