1 | (function($) { |
---|
2 | $.fn.tipsy = function(opts) { |
---|
3 | |
---|
4 | opts = $.extend({fade: false, gravity: 'n'}, opts || {}); |
---|
5 | var tip = null, cancelHide = false; |
---|
6 | |
---|
7 | this.hover(function() { |
---|
8 | |
---|
9 | $.data(this, 'cancel.tipsy', true); |
---|
10 | |
---|
11 | var tip = $.data(this, 'active.tipsy'); |
---|
12 | if (!tip) { |
---|
13 | tip = $('<div class="tipsy"><div class="tipsy-inner">' + $(this).attr('title') + '</div></div>'); |
---|
14 | tip.css({position: 'absolute', zIndex: 100000}); |
---|
15 | $(this).attr('title', ''); |
---|
16 | $.data(this, 'active.tipsy', tip); |
---|
17 | } |
---|
18 | |
---|
19 | var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight}); |
---|
20 | tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); |
---|
21 | var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; |
---|
22 | |
---|
23 | switch (opts.gravity.charAt(0)) { |
---|
24 | case 'n': |
---|
25 | tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north'); |
---|
26 | break; |
---|
27 | case 's': |
---|
28 | tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south'); |
---|
29 | break; |
---|
30 | case 'e': |
---|
31 | tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east'); |
---|
32 | break; |
---|
33 | case 'w': |
---|
34 | tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west'); |
---|
35 | break; |
---|
36 | } |
---|
37 | |
---|
38 | if (opts.fade) { |
---|
39 | tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 1}); |
---|
40 | } else { |
---|
41 | tip.css({visibility: 'visible'}); |
---|
42 | } |
---|
43 | |
---|
44 | }, function() { |
---|
45 | $.data(this, 'cancel.tipsy', false); |
---|
46 | var self = this; |
---|
47 | setTimeout(function() { |
---|
48 | if ($.data(this, 'cancel.tipsy')) return; |
---|
49 | var tip = $.data(self, 'active.tipsy'); |
---|
50 | if (opts.fade) { |
---|
51 | tip.stop().fadeOut(function() { $(this).remove(); }); |
---|
52 | } else { |
---|
53 | tip.remove(); |
---|
54 | } |
---|
55 | }, 100); |
---|
56 | |
---|
57 | }); |
---|
58 | |
---|
59 | }; |
---|
60 | })(jQuery); |
---|