SweetTooltip/sweet-tooltip.js at master · hdytsgt/SweetTooltip · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*
 * Sweet Tooltip
 *
 * by Hidayat Sagita
 * http://www.webstuffshare.com
 * Licensed Under GPL version 2 license.
 *
 */
$(document).ready(function() {

	$('.sweet-tooltip').bind('mouseover', function() {

		tooltip				= $(this);
		tooltipText 		= tooltip.attr('data-text-tooltip');
		tooltipClassName	= tooltip.attr('data-style-tooltip');
		tooltipClass		= '.' + tooltipClassName;

		if(tooltip.hasClass('showed-tooltip')) return false;

		tooltip.addClass('showed-tooltip')
				 .after('<div class="'+tooltipClassName+'">'+tooltipText+'</div>');


		tooltipPosTop 	= tooltip.position().top - $(tooltipClass).outerHeight() - 10;
		tooltipPosLeft = tooltip.position().left;
		tooltipPosLeft = tooltipPosLeft - (($(tooltipClass).outerWidth()/2) - tooltip.outerWidth()/2);

		$(tooltipClass).css({ 'left': tooltipPosLeft, 'top': tooltipPosTop })
							.animate({'opacity':'1', 'marginTop':'0'}, 500);

	}).bind('mouseout', function() {

		$(tooltipClass).animate({'opacity':'0', 'marginTop':'-10px'}, 500, function() {

			$(this).remove();
			tooltip.removeClass('showed-tooltip');

		});
	});
});