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 if (this.options
.center
) {
60 tp
.left
= pos
.left
+ pos
.width
/ 2 - 15;
65 if (this.options
.center
) {
66 tp
.left
= pos
.left
+ pos
.width
/ 2 - actualWidth
+ 15;
68 tp
.left
= pos
.left
+ pos
.width
;
73 $tip
.css(tp
).addClass('tipsy-' + gravity
);
75 if (this.options
.fade
) {
76 $tip
.stop().css({opacity
: 0, display
: 'block', visibility
: 'visible'}).animate({opacity
: this.options
.opacity
}, 100);
78 $tip
.css({visibility
: 'visible', opacity
: this.options
.opacity
});
84 if (this.options
.fade
) {
85 this.tip().stop().fadeOut(100, function() { $(this).remove(); });
91 getTitle: function() {
92 var title
, $e
= this.$element
, o
= this.options
;
94 var title
, o
= this.options
;
95 if (typeof o
.title
== 'string') {
96 title
= $e
.attr(o
.title
== 'title' ? 'original-title' : o
.title
);
97 } else if (typeof o
.title
== 'function') {
98 title
= o
.title
.call($e
[0]);
100 title
= ('' + title
).replace(/(^\s*|\s*$)/, "");
101 return title
|| o
.fallback
;
106 this.$tip
= $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"/></div>');
111 validate: function() {
112 if (!this.$element
[0].parentNode
) {
114 this.$element
= null;
119 enable: function() { this.enabled
= true; },
120 disable: function() { this.enabled
= false; },
121 toggleEnabled: function() { this.enabled
= !this.enabled
; }
124 $.fn
.tipsy = function(options
) {
126 if (options
=== true) {
127 return this.data('tipsy');
128 } else if (typeof options
== 'string') {
129 return this.data('tipsy')[options
]();
132 options
= $.extend({}, $.fn
.tipsy
.defaults
, options
);
135 var tipsy
= $.data(ele
, 'tipsy');
137 tipsy
= new Tipsy(ele
, $.fn
.tipsy
.elementOptions(ele
, options
));
138 $.data(ele
, 'tipsy', tipsy
);
144 var tipsy
= get(this);
145 tipsy
.hoverState
= 'in';
146 if (options
.delayIn
== 0) {
149 setTimeout(function() { if (tipsy
.hoverState
== 'in') tipsy
.show(); }, options
.delayIn
);
154 var tipsy
= get(this);
155 tipsy
.hoverState
= 'out';
156 if (options
.delayOut
== 0) {
159 setTimeout(function() { if (tipsy
.hoverState
== 'out') tipsy
.hide(); }, options
.delayOut
);
163 if (!options
.live
) this.each(function() { get(this); });
165 if (options
.trigger
!= 'manual') {
166 var binder
= options
.live
? 'live' : 'bind',
167 eventIn
= options
.trigger
== 'hover' ? 'mouseenter' : 'focus',
168 eventOut
= options
.trigger
== 'hover' ? 'mouseleave' : 'blur';
169 this[binder
](eventIn
, enter
)[binder
](eventOut
, leave
);
176 $.fn
.tipsy
.defaults
= {
191 // Overwrite this method to provide options on a per-element basis.
192 // For example, you could store the gravity in a 'tipsy-gravity' attribute:
193 // return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' });
194 // (remember - do not modify 'options' in place!)
195 $.fn
.tipsy
.elementOptions = function(ele
, options
) {
196 return $.metadata
? $.extend({}, options
, $(ele
).metadata()) : options
;
199 $.fn
.tipsy
.autoNS = function() {
200 return $(this).offset().top
> ($(document
).scrollTop() + $(window
).height() / 2) ? 's' : 'n';
203 $.fn
.tipsy
.autoWE = function() {
204 return $(this).offset().left
> ($(document
).scrollLeft() + $(window
).width() / 2) ? 'e' : 'w';