1 | /* NOTE: MODIFIED FROM ORIGINAL! */ |
---|
2 | |
---|
3 | (function($) { |
---|
4 | function fixTitle($ele) { |
---|
5 | if ($ele.attr('title') || typeof($ele.attr('original-title')) != 'string') { |
---|
6 | $ele.attr('original-title', $ele.attr('title') || '').removeAttr('title'); |
---|
7 | } |
---|
8 | } |
---|
9 | |
---|
10 | $.fn.tipsy = function(options) { |
---|
11 | |
---|
12 | options = $.extend({}, $.fn.tipsy.defaults, options); |
---|
13 | |
---|
14 | return this.each(function() { |
---|
15 | |
---|
16 | fixTitle($(this)); |
---|
17 | var opts = $.fn.tipsy.elementOptions(this, options); |
---|
18 | var timeout = null; |
---|
19 | |
---|
20 | $(this).hover(function() { |
---|
21 | var self = this; |
---|
22 | timeout = setTimeout(function() { |
---|
23 | $.data(self, 'cancel.tipsy', true); |
---|
24 | |
---|
25 | var tip = $.data(self, 'active.tipsy'); |
---|
26 | if (!tip) { |
---|
27 | tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>'); |
---|
28 | tip.css({position: 'absolute', zIndex: 100000}); |
---|
29 | $.data(self, 'active.tipsy', tip); |
---|
30 | } |
---|
31 | |
---|
32 | fixTitle($(self)); |
---|
33 | |
---|
34 | var title; |
---|
35 | if (typeof opts.title == 'string') { |
---|
36 | title = $(self).attr(opts.title == 'title' ? 'original-title' : opts.title); |
---|
37 | } else if (typeof opts.title == 'function') { |
---|
38 | title = opts.title.call(self); |
---|
39 | } |
---|
40 | |
---|
41 | tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback); |
---|
42 | |
---|
43 | |
---|
44 | var pos = $.extend({}, $(self).offset(), {width: self.offsetWidth, height: self.offsetHeight}); |
---|
45 | tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity |
---|
46 | tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); |
---|
47 | |
---|
48 | tip.css( { width: tip.width() + 1, height: tip.height() } ); |
---|
49 | |
---|
50 | var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; |
---|
51 | var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(self) : opts.gravity; |
---|
52 | |
---|
53 | var top, left; |
---|
54 | switch (gravity.charAt(0)) { |
---|
55 | case 'n': |
---|
56 | top = pos.top + pos.height; |
---|
57 | left = pos.left + pos.width / 2 - actualWidth / 2; |
---|
58 | tip.addClass('tipsy-north'); |
---|
59 | break; |
---|
60 | case 's': |
---|
61 | top = pos.top - actualHeight; |
---|
62 | left = pos.left + pos.width / 2 - actualWidth / 2; |
---|
63 | tip.addClass('tipsy-south'); |
---|
64 | break; |
---|
65 | case 'e': |
---|
66 | top = pos.top + pos.height / 2 - actualHeight / 2; |
---|
67 | left = pos.left - actualWidth; |
---|
68 | tip.addClass('tipsy-east'); |
---|
69 | break; |
---|
70 | case 'w': |
---|
71 | top = pos.top + pos.height / 2 - actualHeight / 2; |
---|
72 | left = pos.left + pos.width; |
---|
73 | tip.addClass('tipsy-west'); |
---|
74 | break; |
---|
75 | } |
---|
76 | // Shift if off screen |
---|
77 | var w = $(window); |
---|
78 | |
---|
79 | // If off the top of the screen, flip |
---|
80 | if ( top < w.scrollTop() && gravity.charAt( 0 ) == 's' ) { |
---|
81 | top = pos.top + pos.height; |
---|
82 | gravity = 'north'; |
---|
83 | tip.removeClass('tipsy-south').addClass('tipsy-north'); |
---|
84 | } |
---|
85 | |
---|
86 | // If off bottom, just shift for now |
---|
87 | top = Math.min( top, w.scrollTop() + w.height() - tip.outerHeight() ); |
---|
88 | |
---|
89 | |
---|
90 | // Shift left or right |
---|
91 | var left_shift = 0; |
---|
92 | if ( left < w.scrollLeft() ) { |
---|
93 | left_shift = left - w.scrollLeft(); |
---|
94 | } |
---|
95 | var t = w.scrollLeft() + w.width() - tip.outerWidth(); |
---|
96 | if ( left > t ) { |
---|
97 | left_shift = left - t; |
---|
98 | } |
---|
99 | |
---|
100 | left -= left_shift; |
---|
101 | |
---|
102 | tip.css( { left: left, top: top } ); |
---|
103 | |
---|
104 | // Shift background to center over element (not implemented for east/west) |
---|
105 | switch (gravity.charAt(0)) { |
---|
106 | case 'n': |
---|
107 | tip.css( 'background-position', - ( 250 - tip.outerWidth() / 2 ) + left_shift + "px top" ); |
---|
108 | break; |
---|
109 | case 's': |
---|
110 | tip.css( 'background-position', - ( 250 - tip.outerWidth() / 2 ) + left_shift + "px bottom" ); |
---|
111 | break; |
---|
112 | case 'e': |
---|
113 | break; |
---|
114 | case 'w': |
---|
115 | break; |
---|
116 | } |
---|
117 | |
---|
118 | if (opts.fade) { |
---|
119 | tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: opts.opacity}); |
---|
120 | } else { |
---|
121 | tip.css({visibility: 'visible', opacity: opts.opacity}); |
---|
122 | } |
---|
123 | }, opts.delayIn); |
---|
124 | |
---|
125 | }, function() { |
---|
126 | $.data(this, 'cancel.tipsy', false); |
---|
127 | var self = this; |
---|
128 | clearTimeout(timeout); |
---|
129 | setTimeout(function() { |
---|
130 | if ($.data(this, 'cancel.tipsy')) { return; } |
---|
131 | var tip = $.data(self, 'active.tipsy'); |
---|
132 | if (opts.fade) { |
---|
133 | tip.stop().fadeOut(function() { $(this).remove(); }); |
---|
134 | } else if (tip) { |
---|
135 | tip.remove(); |
---|
136 | } |
---|
137 | }, opts.delayOut); |
---|
138 | |
---|
139 | }); |
---|
140 | |
---|
141 | }); |
---|
142 | |
---|
143 | }; |
---|
144 | |
---|
145 | // Overwrite this method to provide options on a per-element basis. |
---|
146 | // For example, you could store the gravity in a 'tipsy-gravity' attribute: |
---|
147 | // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); |
---|
148 | // (remember - do not modify 'options' in place!) |
---|
149 | $.fn.tipsy.elementOptions = function(ele, options) { |
---|
150 | return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; |
---|
151 | }; |
---|
152 | |
---|
153 | $.fn.tipsy.defaults = { |
---|
154 | delayIn: 0, |
---|
155 | delayOut: 100, |
---|
156 | fade: false, |
---|
157 | fallback: '', |
---|
158 | gravity: 'n', |
---|
159 | html: false, |
---|
160 | opacity: 0.8, |
---|
161 | title: 'title' |
---|
162 | }; |
---|
163 | |
---|
164 | $.fn.tipsy.autoNS = function() { |
---|
165 | return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; |
---|
166 | }; |
---|
167 | |
---|
168 | $.fn.tipsy.autoWE = function() { |
---|
169 | return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; |
---|
170 | }; |
---|
171 | |
---|
172 | })(jQuery); |
---|