1
|
/*! UIkit 2.27.5 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */
|
2
|
(function(addon) {
|
3
|
var component;
|
4
|
|
5
|
if (window.UIkit2) {
|
6
|
component = addon(UIkit2);
|
7
|
}
|
8
|
|
9
|
if (typeof define == 'function' && define.amd) {
|
10
|
define('uikit-tooltip', ['uikit'], function(){
|
11
|
return component || addon(UIkit2);
|
12
|
});
|
13
|
}
|
14
|
|
15
|
})(function(UI){
|
16
|
|
17
|
"use strict";
|
18
|
|
19
|
var $tooltip, // tooltip container
|
20
|
tooltipdelay, checkIdle;
|
21
|
|
22
|
UI.component('tooltip', {
|
23
|
|
24
|
defaults: {
|
25
|
offset: 5,
|
26
|
pos: 'top',
|
27
|
animation: false,
|
28
|
delay: 0, // in miliseconds
|
29
|
cls: '',
|
30
|
activeClass: 'uk-active',
|
31
|
src: function(ele) {
|
32
|
var title = ele.attr('title');
|
33
|
|
34
|
if (title !== undefined) {
|
35
|
ele.data('cached-title', title).removeAttr('title');
|
36
|
}
|
37
|
|
38
|
return ele.data("cached-title");
|
39
|
}
|
40
|
},
|
41
|
|
42
|
tip: '',
|
43
|
|
44
|
boot: function() {
|
45
|
|
46
|
// init code
|
47
|
UI.$html.on('mouseenter.tooltip.uikit focus.tooltip.uikit', '[data-uk-tooltip]', function(e) {
|
48
|
var ele = UI.$(this);
|
49
|
|
50
|
if (!ele.data('tooltip')) {
|
51
|
UI.tooltip(ele, UI.Utils.options(ele.attr('data-uk-tooltip')));
|
52
|
ele.trigger('mouseenter');
|
53
|
}
|
54
|
});
|
55
|
},
|
56
|
|
57
|
init: function() {
|
58
|
|
59
|
var $this = this;
|
60
|
|
61
|
if (!$tooltip) {
|
62
|
$tooltip = UI.$('<div class="uk-tooltip"></div>').appendTo("body");
|
63
|
}
|
64
|
|
65
|
this.on({
|
66
|
focus : function(e) { $this.show(); },
|
67
|
blur : function(e) { $this.hide(); },
|
68
|
mouseenter : function(e) { $this.show(); },
|
69
|
mouseleave : function(e) { $this.hide(); }
|
70
|
});
|
71
|
},
|
72
|
|
73
|
show: function() {
|
74
|
|
75
|
this.tip = typeof(this.options.src) === 'function' ? this.options.src(this.element) : this.options.src;
|
76
|
|
77
|
if (tooltipdelay) clearTimeout(tooltipdelay);
|
78
|
if (checkIdle) clearInterval(checkIdle);
|
79
|
|
80
|
if (typeof(this.tip) === 'string' ? !this.tip.length:true) return;
|
81
|
|
82
|
$tooltip.stop().css({top: -2000, visibility: 'hidden'}).removeClass(this.options.activeClass).show();
|
83
|
$tooltip.html('<div class="uk-tooltip-inner">' + this.tip + '</div>');
|
84
|
|
85
|
var $this = this,
|
86
|
pos = UI.$.extend({}, this.element.offset(), {width: this.element[0].offsetWidth, height: this.element[0].offsetHeight}),
|
87
|
width = $tooltip[0].offsetWidth,
|
88
|
height = $tooltip[0].offsetHeight,
|
89
|
offset = typeof(this.options.offset) === "function" ? this.options.offset.call(this.element) : this.options.offset,
|
90
|
position = typeof(this.options.pos) === "function" ? this.options.pos.call(this.element) : this.options.pos,
|
91
|
tmppos = position.split("-"),
|
92
|
tcss = {
|
93
|
display : 'none',
|
94
|
visibility : 'visible',
|
95
|
top : (pos.top + pos.height + height),
|
96
|
left : pos.left
|
97
|
};
|
98
|
|
99
|
|
100
|
// prevent strange position
|
101
|
// when tooltip is in offcanvas etc.
|
102
|
if (UI.$html.css('position')=='fixed' || UI.$body.css('position')=='fixed'){
|
103
|
var bodyoffset = UI.$('body').offset(),
|
104
|
htmloffset = UI.$('html').offset(),
|
105
|
docoffset = {top: (htmloffset.top + bodyoffset.top), left: (htmloffset.left + bodyoffset.left)};
|
106
|
|
107
|
pos.left -= docoffset.left;
|
108
|
pos.top -= docoffset.top;
|
109
|
}
|
110
|
|
111
|
|
112
|
if ((tmppos[0] == 'left' || tmppos[0] == 'right') && UI.langdirection == 'right') {
|
113
|
tmppos[0] = tmppos[0] == 'left' ? 'right' : 'left';
|
114
|
}
|
115
|
|
116
|
var variants = {
|
117
|
bottom : {top: pos.top + pos.height + offset, left: pos.left + pos.width / 2 - width / 2},
|
118
|
top : {top: pos.top - height - offset, left: pos.left + pos.width / 2 - width / 2},
|
119
|
left : {top: pos.top + pos.height / 2 - height / 2, left: pos.left - width - offset},
|
120
|
right : {top: pos.top + pos.height / 2 - height / 2, left: pos.left + pos.width + offset}
|
121
|
};
|
122
|
|
123
|
UI.$.extend(tcss, variants[tmppos[0]]);
|
124
|
|
125
|
if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width);
|
126
|
|
127
|
var boundary = this.checkBoundary(tcss.left, tcss.top, width, height);
|
128
|
|
129
|
if(boundary) {
|
130
|
|
131
|
switch(boundary) {
|
132
|
case 'x':
|
133
|
|
134
|
if (tmppos.length == 2) {
|
135
|
position = tmppos[0]+"-"+(tcss.left < 0 ? 'left': 'right');
|
136
|
} else {
|
137
|
position = tcss.left < 0 ? 'right': 'left';
|
138
|
}
|
139
|
|
140
|
break;
|
141
|
|
142
|
case 'y':
|
143
|
if (tmppos.length == 2) {
|
144
|
position = (tcss.top < 0 ? 'bottom': 'top')+'-'+tmppos[1];
|
145
|
} else {
|
146
|
position = (tcss.top < 0 ? 'bottom': 'top');
|
147
|
}
|
148
|
|
149
|
break;
|
150
|
|
151
|
case 'xy':
|
152
|
if (tmppos.length == 2) {
|
153
|
position = (tcss.top < 0 ? 'bottom': 'top')+'-'+(tcss.left < 0 ? 'left': 'right');
|
154
|
} else {
|
155
|
position = tcss.left < 0 ? 'right': 'left';
|
156
|
}
|
157
|
|
158
|
break;
|
159
|
|
160
|
}
|
161
|
|
162
|
tmppos = position.split('-');
|
163
|
|
164
|
UI.$.extend(tcss, variants[tmppos[0]]);
|
165
|
|
166
|
if (tmppos.length == 2) tcss.left = (tmppos[1] == 'left') ? (pos.left) : ((pos.left + pos.width) - width);
|
167
|
}
|
168
|
|
169
|
|
170
|
tcss.left -= UI.$body.position().left;
|
171
|
|
172
|
tooltipdelay = setTimeout(function(){
|
173
|
|
174
|
$tooltip.css(tcss).attr('class', ['uk-tooltip', 'uk-tooltip-'+position, $this.options.cls].join(' '));
|
175
|
|
176
|
if ($this.options.animation) {
|
177
|
$tooltip.css({opacity: 0, display: 'block'}).addClass($this.options.activeClass).animate({opacity: 1}, parseInt($this.options.animation, 10) || 400);
|
178
|
} else {
|
179
|
$tooltip.show().addClass($this.options.activeClass);
|
180
|
}
|
181
|
|
182
|
tooltipdelay = false;
|
183
|
|
184
|
// close tooltip if element was removed or hidden
|
185
|
checkIdle = setInterval(function(){
|
186
|
if(!$this.element.is(':visible')) $this.hide();
|
187
|
}, 150);
|
188
|
|
189
|
}, parseInt(this.options.delay, 10) || 0);
|
190
|
},
|
191
|
|
192
|
hide: function() {
|
193
|
|
194
|
if (this.element.is('input') && this.element[0]===document.activeElement) return;
|
195
|
|
196
|
if (tooltipdelay) clearTimeout(tooltipdelay);
|
197
|
if (checkIdle) clearInterval(checkIdle);
|
198
|
|
199
|
$tooltip.stop();
|
200
|
|
201
|
if (this.options.animation) {
|
202
|
|
203
|
var $this = this;
|
204
|
|
205
|
$tooltip.fadeOut(parseInt(this.options.animation, 10) || 400, function(){
|
206
|
$tooltip.removeClass($this.options.activeClass)
|
207
|
});
|
208
|
|
209
|
} else {
|
210
|
$tooltip.hide().removeClass(this.options.activeClass);
|
211
|
}
|
212
|
},
|
213
|
|
214
|
content: function() {
|
215
|
return this.tip;
|
216
|
},
|
217
|
|
218
|
checkBoundary: function(left, top, width, height) {
|
219
|
|
220
|
var axis = "";
|
221
|
|
222
|
if(left < 0 || ((left - UI.$win.scrollLeft())+width) > window.innerWidth) {
|
223
|
axis += "x";
|
224
|
}
|
225
|
|
226
|
if(top < 0 || ((top - UI.$win.scrollTop())+height) > window.innerHeight) {
|
227
|
axis += "y";
|
228
|
}
|
229
|
|
230
|
return axis;
|
231
|
}
|
232
|
});
|
233
|
|
234
|
return UI.tooltip;
|
235
|
});
|