1 // tipsy, facebook style tooltips for jquery
3 // (c) 2008-2010 jason frame [jason@onehackoranother.com]
4 // releated under the MIT license
8 function fixTitle($ele
) {
9 if ($ele
.attr('title') || typeof($ele
.attr('original-title')) != 'string') {
10 $ele
.attr('original-title', $ele
.attr('title') || '').removeAttr('title');
14 function Tipsy(element
, options
) {
15 this.$element
= $(element
);
16 this.options
= options
;
18 fixTitle(this.$element
);
23 var title
= this.getTitle();
24 if (title
&& this.enabled
) {
25 var $tip
= this.tip();
27 $tip
.find('.tipsy-inner')[this.options
.html
? 'html' : 'text'](title
);
28 $tip
[0].className
= 'tipsy'; // reset classname in case of dynamic gravity
29 $tip
.remove().css({top
: 0, left
: 0, visibility
: 'hidden', display
: 'block'}).appendTo(document
.body
);
31 var pos
= $.extend({}, this.$element
.offset(), {
32 width
: this.$element
[0].offsetWidth
,
33 height
: this.$element
[0].offsetHeight
36 var actualWidth
= $tip
[0].offsetWidth
, actualHeight
= $tip
[0].offsetHeight
;
37 var gravity
= (typeof this.options
.gravity
== 'function')
38 ? this.options
.gravity
.call(this.$element
[0])
39 : this.options
.gravity
;
42 switch (gravity
.charAt(0)) {
44 tp
= {top
: pos
.top
+ pos
.height
+ this.options
.offset
, left
: pos
.left
+ pos
.width
/ 2 - actualWidth
/ 2};
47 tp
= {top
: pos
.top
- actualHeight
- this.options
.offset
, left
: pos
.left
+ pos
.width
/ 2 - actualWidth
/ 2};
50 tp
= {top
: pos
.top
+ pos
.height
/ 2 - actualHeight
/ 2, left
: pos
.left
- actualWidth
- this.options
.offset
};
53 tp
= {top
: pos
.top
+ pos
.height
/ 2 - actualHeight
/ 2, left
: pos
.left
+ pos
.width
+ this.options
.offset
};
57 if (gravity
.length
== 2) {
58 if (gravity
.charAt(1) == 'w') {
59 tp
.left
= pos
.left
+ pos
.width
/ 2 - 15;
61 tp
.left
= pos
.left
+ pos
.width
/ 2 - actualWidth
+ 15;
65 $tip
.css(tp
).addClass('tipsy-' + gravity
);
67 if (this.options
.fade
) {
68 $tip
.stop().css({opacity
: 0, display
: 'block', visibility
: 'visible'}).animate({opacity
: this.options
.opacity
});
70 $tip
.css({visibility
: 'visible', opacity
: this.options
.opacity
});
76 if (this.options
.fade
) {
77 this.tip().stop().fadeOut(function() { $(this).remove(); });
83 getTitle: function() {
84 var title
, $e
= this.$element
, o
= this.options
;
86 var title
, o
= this.options
;
87 if (typeof o
.title
== 'string') {
88 title
= $e
.attr(o
.title
== 'title' ? 'original-title' : o
.title
);
89 } else if (typeof o
.title
== 'function') {
90 title
= o
.title
.call($e
[0]);
92 title
= ('' + title
).replace(/(^\s*|\s*$)/, "");
93 return title
|| o
.fallback
;
98 this.$tip
= $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
103 validate: function() {
104 if (!this.$element
[0].parentNode
) {
106 this.$element
= null;
111 enable: function() { this.enabled
= true; },
112 disable: function() { this.enabled
= false; },
113 toggleEnabled: function() { this.enabled
= !this.enabled
; }
116 $.fn
.tipsy = function(options
) {
118 if (options
=== true) {
119 return this.data('tipsy');
120 } else if (typeof options
== 'string') {
121 return this.data('tipsy')[options
]();
124 options
= $.extend({}, $.fn
.tipsy
.defaults
, options
);
127 var tipsy
= $.data(ele
, 'tipsy');
129 tipsy
= new Tipsy(ele
, $.fn
.tipsy
.elementOptions(ele
, options
));
130 $.data(ele
, 'tipsy', tipsy
);
136 var tipsy
= get(this);
137 tipsy
.hoverState
= 'in';
138 if (options
.delayIn
== 0) {
141 setTimeout(function() { if (tipsy
.hoverState
== 'in') tipsy
.show(); }, options
.delayIn
);
146 var tipsy
= get(this);
147 tipsy
.hoverState
= 'out';
148 if (options
.delayOut
== 0) {
151 setTimeout(function() { if (tipsy
.hoverState
== 'out') tipsy
.hide(); }, options
.delayOut
);
155 if (!options
.live
) this.each(function() { get(this); });
157 if (options
.trigger
!= 'manual') {
158 var binder
= options
.live
? 'live' : 'bind',
159 eventIn
= options
.trigger
== 'hover' ? 'mouseenter' : 'focus',
160 eventOut
= options
.trigger
== 'hover' ? 'mouseleave' : 'blur';
161 this[binder
](eventIn
, enter
)[binder
](eventOut
, leave
);
168 $.fn
.tipsy
.defaults
= {
182 // Overwrite this method to provide options on a per-element basis.
183 // For example, you could store the gravity in a 'tipsy-gravity' attribute:
184 // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
185 // (remember - do not modify 'options' in place!)
186 $.fn
.tipsy
.elementOptions = function(ele
, options
) {
187 return $.metadata
? $.extend({}, options
, $(ele
).metadata()) : options
;
190 $.fn
.tipsy
.autoNS = function() {
191 return $(this).offset().top
> ($(document
).scrollTop() + $(window
).height() / 2) ? 's' : 'n';
194 $.fn
.tipsy
.autoWE = function() {
195 return $(this).offset().left
> ($(document
).scrollLeft() + $(window
).width() / 2) ? 'e' : 'w';