1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
/*!
* jquery.tooltip.js 0.0.1 - https://github.com/yckart/jquery.tooltip.js
* The tooltip to use, ready for mobile!
*
* Copyright (c) 2013 Yannick Albert (http://yckart.com)
* Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php).
* 2013/02/09
*/
(function ($, window, document) {
'use strict';
var pluginName = 'tooltip',
defaults = {
fade: false,
fallback: '',
align: 'autoTop',
html: false,
attr: 'title',
trigger: {
show: 'ontouchend' in document ? 'touchstart' : 'mouseenter',
hide: 'ontouchend' in document ? 'touchend' : 'mouseleave'
},
delay: {
show: 0,
hide: 0
}
};
function Plugin(el, options) {
options = $.extend({}, defaults, options);
var elem = $(el),
timeout;
elem.on('tooltip:show ' + options.trigger.show, function(){
$.data(this, 'cancel.tooltip', true);
var tip = $.data(this, 'active.tooltip');
if (!tip) {
tip = $('<div class="tooltip"><div class="tooltip-inner"/></div>').css({position:'absolute', zIndex:100000});
$.data(this, 'active.tooltip', tip);
}
if (elem.attr('title') || typeof (elem.attr('original-title')) !== 'string') {
elem.attr('original-title', elem.attr('title') || '').removeAttr('title');
}
var title;
if (typeof options.attr === 'string') {
title = elem.attr(options.attr === 'title' ? 'original-title' : options.attr);
} else if (typeof options.attr == 'function') {
title = options.attr.call(this);
}
tip.find('.tooltip-inner')[options.html ? 'html' : 'text'](title || options.fallback);
var pos = $.extend({}, elem.offset(), {width: this.offsetWidth, height: this.offsetHeight});
tip[0].className = 'tooltip';
tip.remove().css({
top: 0,
left: 0,
opacity: 0
}).appendTo(document.body);
var actualWidth = tip[0].offsetWidth,
actualHeight = tip[0].offsetHeight,
dir = options.align === 'autoTop' ?
pos.top > ($(document).scrollTop() + $(window).height() / 2) ? 't' : 'b' :
pos.left > ($(document).scrollLeft() + $(window).width() / 2) ? 'l' : 'r';
switch (options.align.charAt(0) === 'a' ? dir : options.align.charAt(0)) {
case 'b':
tip.css({top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tooltip-bottom');
break;
case 't':
tip.css({top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}).addClass('tooltip-top');
break;
case 'l':
tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}).addClass('tooltip-left');
break;
case 'r':
tip.css({top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}).addClass('tooltip-right');
break;
}
clearTimeout(timeout);
tip.stop().delay(options.delay.show).fadeTo(options.fade ? options.fade.duration : 0, options.fade.opacity || 0.8, options.fade.complete);
});
elem.on('tooltip:hide ' + options.trigger.hide, function(){
$.data(this, 'cancel.tooltip', false);
var self = this;
timeout = setTimeout(function () {
if ($.data(self, 'cancel.tooltip')) return;
var tip = $.data(self, 'active.tooltip');
if (options.fade) {
tip.stop().fadeTo(options.fade.duration, 0, function () {
tip.remove();
if(options.fade.complete) options.fade.complete(true);
});
} else {
tip.remove();
}
}, options.delay.hide);
});
}
$.fn[pluginName] = function (options) {
return this.each(function () {
if (!$.data(this, "plugin_" + pluginName)) {
$.data(this, "plugin_" + pluginName, new Plugin(this, options));
}
});
};
}(jQuery, window, document));
|
