https://pizzacasapresto94.fr/tinyTips/jquery.tinyTips.js

1/***********************************************************/
2/*                    tinyTips Plugin                      */
3/*                      Version: 1.1                       */
4/*                      Mike Merritt                       */
5/*                 Updated: Mar 2nd, 2010                  */
6/***********************************************************/
7
8(function($){  
9	$.fn.tinyTips = function (tipColor, supCont) {
10		
11		if (tipColor === 'null') {
12			tipColor = 'light';
13		} 
14		
15		var tipName = tipColor + 'Tip';
16		
17		/* User settings
18		**********************************/
19		
20		// Enter the markup for your tooltips here. The wrapping div must have a class of tinyTip and 
21		// it must have a div with the class "content" somewhere inside of it.
22		var tipFrame = '<div class="' + tipName + '"><div class="content"></div><div class="bottom">&nbsp;</div></div>';
23		
24		// Speed of the animations in milliseconds - 1000 = 1 second.
25		var animSpeed = 300;
26		
27		/***************************************************************************************************/
28		/* End of user settings - Do not edit below this line unless you are trying to edit functionality. */
29		/***************************************************************************************************/
30		
31		// Global tinyTip variables;
32		var tinyTip;
33		var tText;
34		
35		// When we hover over the element that we want the tooltip applied to
36		$(this).hover(function() {
37		
38			// Inject the markup for the tooltip into the page and
39			// set the tooltip global to the current markup and then hide it.
40			$('body').append(tipFrame);
41			var divTip = 'div.'+tipName;
42			tinyTip = $(divTip);
43			tinyTip.hide();
44			
45			// Grab the content for the tooltip from the title attribute (or the supplied content) and
46			// inject it into the markup for the current tooltip. NOTE: title attribute is used unless
47			// other content is supplied instead.
48			if (supCont === 'title') {
49				var tipCont = $(this).attr('title');
50			} else if (supCont !== 'title') {
51				var tipCont = supCont;
52			}
53			$(divTip + ' .content').html(tipCont);
54			tText = $(this).attr('title');
55			$(this).attr('title', '');
56			
57			// Offsets so that the tooltip is centered over the element it is being applied to but
58			// raise it up above the element so it isn't covering it.
59			var yOffset = tinyTip.height() + 2;
60			var xOffset = (tinyTip.width() / 2) - ($(this).width() / 2);
61			
62			// Grab the coordinates for the element with the tooltip and make a new copy
63			// so that we can keep the original un-touched.
64			var pos = $(this).offset();
65			var nPos = pos;
66			
67			// Add the offsets to the tooltip position
68			nPos.top = pos.top - yOffset;
69			nPos.left = pos.left - xOffset;
70			
71			// Make sure that the tooltip has absolute positioning and a high z-index, 
72			// then place it at the correct spot and fade it in.
73			tinyTip.css('position', 'absolute').css('z-index', '1000');
74			tinyTip.css(nPos).fadeIn(animSpeed);
75			
76		}, function() {
77			
78			$(this).attr('title', tText);
79		
80			// Fade the tooltip out once the mouse moves away and then remove it from the DOM.
81			tinyTip.fadeOut(animSpeed, function() {
82				$(this).remove();
83			});
84			
85		});
86		
87	}
88
89})(jQuery);