-
Notifications
You must be signed in to change notification settings - Fork 244
/
ik_tooltip.js
96 lines (70 loc) · 2.24 KB
/
ik_tooltip.js
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
;(function ( $, window, document, undefined ) {
var pluginName = 'ik_tooltip',
defaults = {
'position': 'top'
};
/**
* @constructs Plugin
* @param {Object} element - Current DOM element from selected collection.
* @param {Object} [options] - Configuration options.
* @param {number} [options.position='top'] - Tooltip location (currently supports only top).
*/
function Plugin( element, options ) {
this._name = pluginName;
this._defaults = defaults;
this.element = $(element);
this.options = $.extend( {}, defaults, options) ;
this.init();
}
/** Initializes plugin. */
Plugin.prototype.init = function () {
var id, $elem, $tooltip, tip;
id = 'tip' + $('.ik_tooltip').length; // generate unique id
$elem = this.element;
tip = $elem.attr('title'); // get text from element title attribute (required)
if(tip.length > 0) {
$tooltip = $('<span/>') // create tooltip
.text(tip)
.addClass('ik_tooltip')
.attr({
'id': id,
});
$elem
.css('position', 'relative')
.removeAttr('title') // remove title to prevent it from being read
.after($tooltip)
.on('mouseover', function(event) {
var y, x;
y = $elem.position().top - $tooltip.height() - 20;
x = $elem.position().left;
if(!$elem.is(':focus')) { // remove focus from a focused element
$(':focus').blur();
}
$('.ik_tooltip').removeClass('mouseover'); // remove mouseover class from all tooltips
if (event.type === 'mouseover') {
$tooltip.addClass('mouseover'); // add mouseover class when mouse moves over the current element
}
$tooltip // position and show tooltip
.css({
'top': y,
'left': x
})
.addClass('visible');
})
.on('mouseout', function(event) {
if (!$(event.currentTarget).is(':focus') ) { // hide tooltip if current element is not focused
$tooltip
.removeClass('visible mouseover');
}
})
}
};
$.fn[pluginName] = function ( options ) {
return this.each(function () {
if ( !$.data(this, pluginName )) {
$.data( this, pluginName,
new Plugin( this, options ));
}
});
}
})( jQuery, window, document );