| 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); |
|---|