Poshy提示jQuery插件演示页面

demo1

Hover for a tooltip

$('#demo-basic').poshytip();

demo2

.tip-yellow

$('#demo-tip-yellow').poshytip();

.tip-violet

$('#demo-tip-violet').poshytip({
className: 'tip-violet',
bgImageFrameSize: 9
});

.tip-darkgray

$('#demo-tip-darkgray').poshytip({
className: 'tip-darkgray',
bgImageFrameSize: 11,
offsetX: -25
});

.tip-skyblue

$('#demo-tip-skyblue').poshytip({
className: 'tip-skyblue',
bgImageFrameSize: 9,
offsetX: 0,
offsetY: 20
});

.tip-yellowsimple (no background-image used for the tooltip body)

$('#demo-tip-yellowsimple').poshytip({
className: 'tip-yellowsimple',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
offsetY: 5,
allowTipHover: false
});

.tip-twitter (ala Twitter)

$('#demo-tip-twitter').poshytip({
className: 'tip-twitter',
showTimeout: 1,
alignTo: 'target',
alignX: 'center',
offsetY: 5,
allowTipHover: false,
fade: false,
slide: false
});

.tip-green

$('#demo-tip-green').poshytip({
className: 'tip-green',
offsetX: -7,
offsetY: 16,
allowTipHover: false
});

demo3


$('#demo-form-name').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'right',
alignY: 'center',
offsetX: 5,
showTimeout: 100
});


$('#demo-form-email').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'left',
alignY: 'center',
offsetX: 5,
showTimeout: 100
});


$('#demo-form-site').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5,
showTimeout: 100
});


$('#demo-form-subject').poshytip({
className: 'tip-yellowsimple',
showOn: 'focus',
alignTo: 'target',
alignX: 'center',
alignY: 'bottom',
offsetX: 0,
offsetY: 5,
showTimeout: 100
});

demo4

Update content after 1 second

$('#demo-async-timeout').poshytip({
content: function(updateCallback) {
	window.setTimeout(function() {
		updateCallback('Tooltip content updated!');
	}, 1000);
	return 'Loading...';
}
});

demo5

flowers, closeup, sunset, architecture, Plovdiv, old, town, Nesebar, depeche

var flickrFeedsCache = {};

$('#demo-async-flickr > a').poshytip({
className: 'tip-darkgray',
bgImageFrameSize: 11,
alignY: 'bottom',
content: function(updateCallback) {
	var rel = $(this).attr('rel');
	if (flickrFeedsCache[rel] && flickrFeedsCache[rel].container)
		return flickrFeedsCache[rel].container;
	if (!flickrFeedsCache[rel]) {
		flickrFeedsCache[rel] = { container: null };
		var tagsComma = rel.substring(4).replace('-', ',');
		$.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=' + tagsComma + '&tagmode=all&format=json&jsoncallback=?',
			function(data) {
				var container = $('<div/>').addClass('flickr-thumbs');
				$.each(data.items, function(i, item) {
					$('<a/>')
						.attr('href', item.link)
						.append($('<img/>').attr('src', item.media.m))
						.appendTo(container)
						.data('tip', '<strong>' + (item.title || '(no title)') + '</strong><br />by: ' + item.author.match(/\((.*)\)/)[1]);
					if (i == 4)
						return false;
				});
				// add tips for the images inside the main tip
				container.find('a').poshytip({
					content: function(){return $(this).data('tip');},
					className: 'tip-yellowsimple',
					showTimeout: 100,
					alignTo: 'target',
					alignX: 'center',
					alignY: 'bottom',
					offsetY: 5,
					allowTipHover: false,
					hideAniDuration: 0
				});
				// store the content in the cache
				// and call updateCallback() to update the content in the main tooltip
				updateCallback(flickrFeedsCache[rel].container = container);
			}
		);
	}
	return 'Loading images...';
}
});

demo6

Hover for a tooltip that follows the cursor

$('#demo-follow-cursor').poshytip({
followCursor: true,
slide: false
});

demo7

This link has a tooltip that is not triggered automatically

$('#demo-manual-trigger').poshytip({
content: 'Hey, there! This is a tooltip.',
showOn: 'none',
alignTo: 'target',
alignX: 'inner-left',
offsetX: 0,
offsetY: 5
});
$('#button-show').click(function() { $('#demo-manual-trigger').poshytip('show'); });
$('#button-show-delayed').click(function() { $('#demo-manual-trigger').poshytip('showDelayed', 2000); });
$('#button-hide').click(function() { $('#demo-manual-trigger').poshytip('hide'); });
$('#button-hide-delayed').click(function() { $('#demo-manual-trigger').poshytip('hideDelayed', 2000); });
$('#button-update').click(function() { $('#demo-manual-trigger').poshytip('update', 'I am a new content :)'); });
$('#button-disable').click(function() { $('#demo-manual-trigger').poshytip('disable'); });
$('#button-enable').click(function() { $('#demo-manual-trigger').poshytip('enable'); });
$('#button-destroy').click(function() { $('#demo-manual-trigger').poshytip('destroy'); });

demo8

Hover for a tooltip

$('#demo-live-events > a').poshytip({
liveEvents: true
});
$('#button-live-events').click(function() {
$('#demo-live-events').append(', <a title="Hey, there! This is a tooltip." href="#">Hover for a tooltip</a>');
});