https://www.post.gov.tw/post/internet/Group/js/sweet-tooltip.js

1/*
2 * Sweet Tooltip
3 * 
4 * by Hidayat Sagita
5 * http://www.webstuffshare.com
6 * Licensed Under GPL version 2 license.
7 *
8 */
9$(document).ready(function() {
10	
11	$('.sweet-tooltip').bind('mouseover', function() {
12		
13		tooltip				= $(this);
14		tooltipText 		= tooltip.attr('data-text-tooltip');
15		tooltipClassName	= tooltip.attr('data-style-tooltip');
16		tooltipClass		= '.' + tooltipClassName;
17		
18		if(tooltip.hasClass('showed-tooltip')) return false;
19		
20		tooltip.addClass('showed-tooltip')
21				 .after('<div class="'+tooltipClassName+'">'+tooltipText+'</div>');
22
23		
24		tooltipPosTop 	= tooltip.position().top - $(tooltipClass).outerHeight() - 10;
25		tooltipPosLeft = tooltip.position().left;
26		tooltipPosLeft = tooltipPosLeft - (($(tooltipClass).outerWidth()/2) - tooltip.outerWidth()/2);
27		
28		$(tooltipClass).css({ 'left': tooltipPosLeft, 'top': tooltipPosTop })
29							.animate({'opacity':'1', 'marginTop':'0'}, 500);
30		
31	}).bind('mouseout', function() {
32		
33		$(tooltipClass).animate({'opacity':'0', 'marginTop':'-10px'}, 500, function() {
34				
35			$(this).remove();
36			tooltip.removeClass('showed-tooltip');
37				
38		});
39	});
40});