|
| 1 | +(function($) { |
| 2 | + $.fn.tipsy = function(options) { |
| 3 | + |
| 4 | + options = $.extend({}, $.fn.tipsy.defaults, options); |
| 5 | + |
| 6 | + return this.each(function() { |
| 7 | + |
| 8 | + var opts = $.fn.tipsy.elementOptions(this, options); |
| 9 | + |
| 10 | + $(this).hover(function() { |
| 11 | + |
| 12 | + $.data(this, 'cancel.tipsy', true); |
| 13 | + |
| 14 | + var tip = $.data(this, 'active.tipsy'); |
| 15 | + if (!tip) { |
| 16 | + tip = $('<div class="tipsy"><div class="tipsy-inner"/></div>'); |
| 17 | + tip.css({position: 'absolute', zIndex: 100000}); |
| 18 | + $.data(this, 'active.tipsy', tip); |
| 19 | + } |
| 20 | + |
| 21 | + if ($(this).attr('title') || typeof($(this).attr('original-title')) != 'string') { |
| 22 | + $(this).attr('original-title', $(this).attr('title') || '').removeAttr('title'); |
| 23 | + } |
| 24 | + |
| 25 | + var title; |
| 26 | + if (typeof opts.title == 'string') { |
| 27 | + title = $(this).attr(opts.title == 'title' ? 'original-title' : opts.title); |
| 28 | + } else if (typeof opts.title == 'function') { |
| 29 | + title = opts.title.call(this); |
| 30 | + } |
| 31 | + |
| 32 | + tip.find('.tipsy-inner')[opts.html ? 'html' : 'text'](title || opts.fallback); |
| 33 | + |
| 34 | + var pos = $.extend({}, $(this).offset(), {width: this.offsetWidth, height: this.offsetHeight}); |
| 35 | + tip.get(0).className = 'tipsy'; // reset classname in case of dynamic gravity |
| 36 | + tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).appendTo(document.body); |
| 37 | + var actualWidth = tip[0].offsetWidth, actualHeight = tip[0].offsetHeight; |
| 38 | + var gravity = (typeof opts.gravity == 'function') ? opts.gravity.call(this) : opts.gravity; |
| 39 | + |
| 40 | + switch (gravity.charAt(0)) { |
| 41 | + case 'n': |
| 42 | + tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-north'); |
| 43 | + break; |
| 44 | + case 's': |
| 45 | + tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tipsy-south'); |
| 46 | + break; |
| 47 | + case 'e': |
| 48 | + tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tipsy-east'); |
| 49 | + break; |
| 50 | + case 'w': |
| 51 | + tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tipsy-west'); |
| 52 | + break; |
| 53 | + } |
| 54 | + |
| 55 | + if (opts.fade) { |
| 56 | + tip.css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: 0.8}); |
| 57 | + } else { |
| 58 | + tip.css({visibility: 'visible'}); |
| 59 | + } |
| 60 | + |
| 61 | + }, function() { |
| 62 | + $.data(this, 'cancel.tipsy', false); |
| 63 | + var self = this; |
| 64 | + setTimeout(function() { |
| 65 | + if ($.data(this, 'cancel.tipsy')) return; |
| 66 | + var tip = $.data(self, 'active.tipsy'); |
| 67 | + if (opts.fade) { |
| 68 | + tip.stop().fadeOut(function() { $(this).remove(); }); |
| 69 | + } else { |
| 70 | + tip.remove(); |
| 71 | + } |
| 72 | + }, 100); |
| 73 | + |
| 74 | + }); |
| 75 | + |
| 76 | + }); |
| 77 | + |
| 78 | + }; |
| 79 | + |
| 80 | + // Overwrite this method to provide options on a per-element basis. |
| 81 | + // For example, you could store the gravity in a 'tipsy-gravity' attribute: |
| 82 | + // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); |
| 83 | + // (remember - do not modify 'options' in place!) |
| 84 | + $.fn.tipsy.elementOptions = function(ele, options) { |
| 85 | + return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; |
| 86 | + }; |
| 87 | + |
| 88 | + $.fn.tipsy.defaults = { |
| 89 | + fade: false, |
| 90 | + fallback: '', |
| 91 | + gravity: 'n', |
| 92 | + html: false, |
| 93 | + title: 'title' |
| 94 | + }; |
| 95 | + |
| 96 | + $.fn.tipsy.autoNS = function() { |
| 97 | + return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; |
| 98 | + }; |
| 99 | + |
| 100 | + $.fn.tipsy.autoWE = function() { |
| 101 | + return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2) ? 'e' : 'w'; |
| 102 | + }; |
| 103 | + |
| 104 | +})(jQuery); |
0 commit comments