1 // tipsy, facebook style tooltips for jquery
3 // (c) 2008-2010 jason frame [jason@onehackoranother.com]
4 // released under the MIT license
8 function Tipsy(element
, options
) {
9 this.$element
= $(element
);
10 this.options
= options
;
17 var title
= this.getTitle();
18 if (title
&& this.enabled
) {
19 var $tip
= this.tip();
21 $tip
.find('.tipsy-inner')[this.options
.html
? 'html' : 'text'](title
);
22 $tip
[0].className
= 'tipsy'; // reset classname in case of dynamic gravity
23 $tip
.remove().css({top
: 0, left
: 0, visibility
: 'hidden', display
: 'block'}).appendTo(document
.body
);
25 var pos
= $.extend({}, this.$element
.offset(), {
26 width
: this.$element
[0].offsetWidth
,
27 height
: this.$element
[0].offsetHeight
30 var actualWidth
= $tip
[0].offsetWidth
, actualHeight
= $tip
[0].offsetHeight
;
31 var gravity
= (typeof this.options
.gravity
== 'function')
32 ? this.options
.gravity
.call(this.$element
[0])
33 : this.options
.gravity
;
36 switch (gravity
.charAt(0)) {
38 tp
= {top
: pos
.top
+ pos
.height
+ this.options
.offset
, left
: pos
.left
+ pos
.width
/ 2 - actualWidth
/ 2};
41 tp
= {top
: pos
.top
- actualHeight
- this.options
.offset
, left
: pos
.left
+ pos
.width
/ 2 - actualWidth
/ 2};
44 tp
= {top
: pos
.top
+ pos
.height
/ 2 - actualHeight
/ 2, left
: pos
.left
- actualWidth
- this.options
.offset
};
47 tp
= {top
: pos
.top
+ pos
.height
/ 2 - actualHeight
/ 2, left
: pos
.left
+ pos
.width
+ this.options
.offset
};
51 if (gravity
.length
== 2) {
52 if (gravity
.charAt(1) == 'w') {
53 tp
.left
= pos
.left
+ pos
.width
/ 2 - 15;
55 tp
.left
= pos
.left
+ pos
.width
/ 2 - actualWidth
+ 15;
59 $tip
.css(tp
).addClass('tipsy-' + gravity
);
61 if (this.options
.fade
) {
62 $tip
.stop().css({opacity
: 0, display
: 'block', visibility
: 'visible'}).animate({opacity
: this.options
.opacity
});
64 $tip
.css({visibility
: 'visible', opacity
: this.options
.opacity
});
70 if (this.options
.fade
) {
71 this.tip().stop().fadeOut(function() { $(this).remove(); });
77 fixTitle: function() {
78 var $e
= this.$element
;
79 if ($e
.attr('title') || typeof($e
.attr('original-title')) != 'string') {
80 $e
.attr('original-title', $e
.attr('title') || '').removeAttr('title');
84 getTitle: function() {
85 var title
, $e
= this.$element
, o
= this.options
;
87 var title
, o
= this.options
;
88 if (typeof o
.title
== 'string') {
89 title
= $e
.attr(o
.title
== 'title' ? 'original-title' : o
.title
);
90 } else if (typeof o
.title
== 'function') {
91 title
= o
.title
.call($e
[0]);
93 title
= ('' + title
).replace(/(^\s*|\s*$)/, "");
94 return title
|| o
.fallback
;
99 this.$tip
= $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>');
104 validate: function() {
105 if (!this.$element
[0].parentNode
) {
107 this.$element
= null;
112 enable: function() { this.enabled
= true; },
113 disable: function() { this.enabled
= false; },
114 toggleEnabled: function() { this.enabled
= !this.enabled
; }
117 $.fn
.tipsy = function(options
) {
119 if (options
=== true) {
120 return this.data('tipsy');
121 } else if (typeof options
== 'string') {
122 var tipsy
= this.data('tipsy');
123 if (tipsy
) tipsy
[options
]();
127 options
= $.extend({}, $.fn
.tipsy
.defaults
, options
);
130 var tipsy
= $.data(ele
, 'tipsy');
132 tipsy
= new Tipsy(ele
, $.fn
.tipsy
.elementOptions(ele
, options
));
133 $.data(ele
, 'tipsy', tipsy
);
139 var tipsy
= get(this);
140 tipsy
.hoverState
= 'in';
141 if (options
.delayIn
== 0) {
145 setTimeout(function() { if (tipsy
.hoverState
== 'in') tipsy
.show(); }, options
.delayIn
);
150 var tipsy
= get(this);
151 tipsy
.hoverState
= 'out';
152 if (options
.delayOut
== 0) {
155 setTimeout(function() { if (tipsy
.hoverState
== 'out') tipsy
.hide(); }, options
.delayOut
);
159 if (!options
.live
) this.each(function() { get(this); });
161 if (options
.trigger
!= 'manual') {
162 var binder
= options
.live
? 'live' : 'bind',
163 eventIn
= options
.trigger
== 'hover' ? 'mouseenter' : 'focus',
164 eventOut
= options
.trigger
== 'hover' ? 'mouseleave' : 'blur';
165 this[binder
](eventIn
, enter
)[binder
](eventOut
, leave
);
172 $.fn
.tipsy
.defaults
= {
186 // Overwrite this method to provide options on a per-element basis.
187 // For example, you could store the gravity in a 'tipsy-gravity' attribute:
188 // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
189 // (remember - do not modify 'options' in place!)
190 $.fn
.tipsy
.elementOptions = function(ele
, options
) {
191 return $.metadata
? $.extend({}, options
, $(ele
).metadata()) : options
;
194 $.fn
.tipsy
.autoNS = function() {
195 return $(this).offset().top
> ($(document
).scrollTop() + $(window
).height() / 2) ? 's' : 'n';
198 $.fn
.tipsy
.autoWE = function() {
199 return $(this).offset().left
> ($(document
).scrollLeft() + $(window
).width() / 2) ? 'e' : 'w';