[2] | 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); |
---|