jQuery网页提示插件PowerTip.js

页面的head部分，需引入插件的样式文件，简单设置演示页面的样式，并引入jQuery库和提示插件，代码如下：

<link type="text/css" rel="stylesheet" href="css/jquery.powertip-dark.min.css" />
<style type="text/css">
#placement-examples div { text-align: center; }
#placement-examples input { margin: 10px; padding: 10px; }
#placement-examples .east { margin-left: 450px; }
#mousefollow-examples div { background-color: #EEE; text-align: center; line-height: 400px; margin: 0 auto; height: 400px; width: 100%; }
#mouseon-examples div { background-color: #EEE; text-align: center; width: 400px; padding: 40px; }
#events-examples input, #api-examples input { margin: 10px; padding: 10px 30px; }
</style>
<!-- Include jQuery and PowerTip -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.powertip.js"></script>

页面的body部分，分别设置好不同效果的的容器、内容和对应参数等，代码如下：

<h1>jQuery网页提示插件PowerTip.js</h1>
<!-- Placement Examples -->
<div id="placement-examples">
	<h2>Placement examples</h2>
	<div>
		<input type="button" class="north-west-alt" value="North West Alt" title="North west alt placement" />
		<input type="button" class="north-west" value="North West" title="North west placement" />
		<input type="button" class="north" value="North" title="North placement" />
		<input type="button" class="north-east" value="North East" title="North east placement" />
		<input type="button" class="north-east-alt" value="North East Alt" title="North east alt placement" /><br />
		<input type="button" class="west" value="West" title="West placement" />
		<input type="button" class="east" value="East" title="East placement" /><br />
		<input type="button" class="south-west-alt" value="South West Alt" title="South west alt placement" />
		<input type="button" class="south-west" value="South West" title="South west placement" />
		<input type="button" class="south" value="South" title="South placement" />
		<input type="button" class="south-east" value="South East" title="South east placement" />
		<input type="button" class="south-east-alt" value="South East Alt" title="South east alt placement" />
	</div>
</div>
<script type="text/javascript">
$(function() {
	// placement examples
	$('.north').powerTip({ placement: 'n' });
	$('.east').powerTip({ placement: 'e' });
	$('.south').powerTip({ placement: 's' });
	$('.west').powerTip({ placement: 'w' });
	$('.north-west').powerTip({ placement: 'nw' });
	$('.north-east').powerTip({ placement: 'ne' });
	$('.south-west').powerTip({ placement: 'sw' });
	$('.south-east').powerTip({ placement: 'se' });
	$('.north-west-alt').powerTip({ placement: 'nw-alt' });
	$('.north-east-alt').powerTip({ placement: 'ne-alt' });
	$('.south-west-alt').powerTip({ placement: 'sw-alt' });
	$('.south-east-alt').powerTip({ placement: 'se-alt' });
});
</script>

<!-- Mouse-Follow Example -->
<div id="mousefollow-examples">
	<h2>Mouse follow example</h2>
	<div title="Mouse follow">
		The PowerTip for this box will follow the mouse.
	</div>
</div>
<script type="text/javascript">
$(function() {
	// mouse follow example
	$('#mousefollow-examples div').powerTip({ followMouse: true });
});
</script>

<!-- Mouse on to tooltip example -->
<div id="mouseon-examples">
	<h2>Mouse on to tooltip example</h2>
	<div>
		The PowerTip for this box will appear on the right and you will be able to interact with its content.
	</div>
</div>
<script type="text/javascript">
$(function() {
	// mouse-on example
	var mouseOnDiv = $('#mouseon-examples div');
	var tipContent = $(
		'<p><b>Here is some content</b></p>' +
		'<p> Maybe a link </p>'
	);
	mouseOnDiv.data('powertipjq', tipContent);
	mouseOnDiv.powerTip({
		placement: 'e',
		mouseOnToPopup: true
	});
});
</script>

<!-- Custom event examples -->
<div id="events-examples">
	<h2>Custom show and hide event examples</h2>
	<input id="click-click-example" type="button" title="Show and hide on click" value="Show and hide tooltip on click" />
	<input id="mouseenter-mouseenter-example" type="button" title="Show and hide on mouse enter" value="Show and hide tooltip on mouse enter" />
	<input id="mouseenter-clickMouseleave-example" type="button" title="Show on mouse enter, hide on click and mouse leave" value="Show tooltip on mouse enter, hide on click and mouse leave" />
	<input id="click-null-example" type="button" title="Show on click" value="Show tooltip on click" />
</div>
<script type="text/javascript">
$(function() {
	// click-click example
	$('#click-click-example').powerTip({
		openEvents: [ 'click' ],
		closeEvents: [ 'click' ]
	});
	// mouseenter-mouseenter example
	$('#mouseenter-mouseenter-example').powerTip({
		openEvents: [ 'mouseenter' ],
		closeEvents: [ 'mouseenter' ]
	});
	// mouseenter-click example
	$('#mouseenter-clickMouseleave-example').powerTip({
		openEvents: [ 'mouseenter' ],
		closeEvents: [ 'click', 'mouseleave' ]
	});
	// click-null example
	$('#click-null-example').powerTip({
		openEvents: [ 'click' ],
		closeEvents: []
	});
});
</script>

<!-- API Examples -->
<div id="api-examples">
	<h2>API examples</h2>
	<input id="api-open" type="button" value="Show mouse-on tooltip" />
	<input id="api-close" type="button" value="Close any open tooltips" />
	<input id="api-manual" type="button" title="Manual Tooltip" value="Manually applied tooltip (click)" />
	<div id="api-manual-mouse">
		Delegated manual mouseover, with lazy-loaded tooltip:
		<input type="button" value="Child 1" />
		<input type="button" value="Child 2" />
	</div>
</div>
<script type="text/javascript">
$(function() {
	// api examples
	$('#api-open').on('click', function() {
		$.powerTip.show($('#mouseon-examples div'));
	});
	$('#api-close').on('click', function() {
		$.powerTip.hide();
	});
	$('#api-manual')
		.powerTip({
			manual: true
		})
		.on('click', function() {
			$(this).powerTip('show');
		})
		.on('mouseleave', function() {
			$(this).powerTip('hide', true);
		});
	$('#api-manual-mouse')
		.on('mouseenter', 'input', function(evt) {
			if (!$(this).data('powertip')) {
				$(this)
					.data('powertip', 'Tooltip added: ' + (new Date()))
					.powerTip({
						manual: true
					});
			}
			$(this).powerTip('show', evt);
		})
		.on('mouseleave', 'input', function() {
			$(this).powerTip('hide');
		});
});
</script>