Skip to content

Commit 577b7bb

Browse files
object505object505
committed
Fixed resize event, mobile touch issue, added option hideDelay, closes #29, closes #32, closes #34 
1 parent 4b1346c commit 577b7bb

8 files changed

+77
-92
lines changed

‎LICENSE

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
The MIT License (MIT)
22

3-
Copyright (c) 2014 Bojan Petkovski
3+
Copyright (c) 2014-2015 Bojan Petkovski
44

55
Permission is hereby granted, free of charge, to any person obtaining a copy
66
of this software and associated documentation files (the "Software"), to deal

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ To use css3 animation effects please include [Animate.css](http://daneden.github
5454
| width | 200 | Width of the tooltip in px or % (for % add the value in quotes ex.'50%') |
5555
| maxWidth | '' | max-width of the tooltip in px or % (for % add the value in quotes ex.'50%'). For usage you need to set width to '', false or null |
5656
| delay | 200 | Delay before showing the tooltip in ms |
57+
| hideDelay | 0 | Delay before hiding the tooltip in ms |
5758
| animationIn | '' | CSS3 animation effect to show the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
5859
| animationOut | '' | CSS3 animation effect to hide the tooltip using [Animate.css](http://daneden.github.io/animate.css) |
5960
| offsetX | 0 | Offset value of the tooltip on X axis |

‎bower.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tipso",
3-
"version": "1.0.6",
3+
"version": "1.0.7",
44
"description": "A Lightweight Responsive jQuery Tooltip Plugin",
55
"main": ["src/tipso.min.js", "src/tipso.css"],
66
"keywords": [

‎demo/index.html

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<script type="text/template" id="template_sample">
1515
This is a test <%= name %>.
1616
</script>
17-
<script src="../src/tipso.js"></script>
17+
<script src="../src/tipso.min.js"></script>
1818

1919
<!--[if lt IE 9]>
2020
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
@@ -160,6 +160,7 @@
160160
});
161161
// Calback Tipso
162162
jQuery('.callback-tipso').tipso({
163+
useTitle: true,
163164
onShow : function(){
164165
alert('Tipso Showed');
165166
},
@@ -284,6 +285,7 @@ <h3>Defaults</h3>
284285
width : 200,
285286
maxWidth : '',
286287
delay : 200,
288+
hideDelay : 0,
287289
animationIn : '',
288290
animationOut : '',
289291
offsetX : 0,

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"mobile",
1111
"lightweight"
1212
],
13-
"version": "1.0.6",
13+
"version": "1.0.7",
1414
"author": "Bojan Petkovski (http://object505.com/)",
1515
"licenses": [
1616
{

‎src/tipso.js

+68-86
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@
3131
width : 200,
3232
maxWidth : '',
3333
delay : 200,
34+
hideDelay : 0,
3435
animationIn : '',
3536
animationOut : '',
3637
offsetX : 0,
@@ -108,55 +109,44 @@
108109
$e = this.element,
109110
$doc = this.doc;
110111
$e.addClass('tipso_style').removeAttr('title');
111-
if (isTouchSupported()) {
112-
$e.on('click' + '.' + pluginName, function(e) {
113-
obj.mode === 'hide' ? obj.show() : obj.hide();
114-
e.stopPropagation();
112+
113+
if (obj.settings.tooltipHover) {
114+
var waitForHover = null,
115+
hoverHelper = null;
116+
$e.on('mouseover' + '.' + pluginName, function() {
117+
clearTimeout(waitForHover);
118+
clearTimeout(hoverHelper);
119+
hoverHelper = setTimeout(function(){
120+
obj.show();
121+
}, 150);
115122
});
116-
$doc.on('click', function closeTipso () {
117-
if (obj.mode === 'show') {
123+
$e.on('mouseout' + '.' + pluginName, function() {
124+
clearTimeout(waitForHover);
125+
clearTimeout(hoverHelper);
126+
waitForHover = setTimeout(function(){
118127
obj.hide();
119-
}
128+
}, 200);
129+
130+
obj.tooltip()
131+
.on('mouseover' + '.' + pluginName, function() {
132+
obj.mode = 'tooltipHover';
133+
})
134+
.on('mouseout' + '.' + pluginName, function() {
135+
obj.mode = 'show';
136+
clearTimeout(waitForHover);
137+
waitForHover = setTimeout(function(){
138+
obj.hide();
139+
}, 200);
140+
})
141+
;
120142
});
121143
} else {
122-
if (obj.settings.tooltipHover) {
123-
var waitForHover = null,
124-
hoverHelper = null;
125-
$e.on('mouseover' + '.' + pluginName, function() {
126-
clearTimeout(waitForHover);
127-
clearTimeout(hoverHelper);
128-
hoverHelper = setTimeout(function(){
129-
obj.show();
130-
}, 150);
131-
});
132-
$e.on('mouseout' + '.' + pluginName, function() {
133-
clearTimeout(waitForHover);
134-
clearTimeout(hoverHelper);
135-
waitForHover = setTimeout(function(){
136-
obj.hide();
137-
}, 200);
138-
139-
obj.tooltip()
140-
.on('mouseover' + '.' + pluginName, function() {
141-
obj.mode = 'tooltipHover';
142-
})
143-
.on('mouseout' + '.' + pluginName, function() {
144-
obj.mode = 'show';
145-
clearTimeout(waitForHover);
146-
waitForHover = setTimeout(function(){
147-
obj.hide();
148-
}, 200);
149-
})
150-
;
151-
});
152-
} else {
153-
$e.on('mouseover' + '.' + pluginName, function() {
154-
obj.show();
155-
});
156-
$e.on('mouseout' + '.' + pluginName, function() {
157-
obj.hide();
158-
});
159-
}
144+
$e.on('mouseover' + '.' + pluginName, function() {
145+
obj.show();
146+
});
147+
$e.on('mouseout' + '.' + pluginName, function() {
148+
obj.hide();
149+
});
160150
}
161151
},
162152
tooltip: function() {
@@ -212,11 +202,14 @@
212202
tipso_bubble.find('.tipso_content').html(obj.content());
213203
tipso_bubble.find('.tipso_title').html(obj.titleContent());
214204
reposition(obj);
215-
$win.resize(function tipsoResizeHandler () {
205+
206+
$win.on('resize' + '.' + pluginName, function tipsoResizeHandler () {
216207
obj.settings.position = obj.settings.preferedPosition;
217208
reposition(obj);
218209
});
219210

211+
window.clearTimeout(obj.timeout);
212+
obj.timeout = null;
220213
obj.timeout = window.setTimeout(function() {
221214
if (obj.ieFade || obj.settings.animationIn === '' || obj.settings.animationOut === ''){
222215
tipso_bubble.appendTo('body').stop(true, true).fadeIn(obj.settings
@@ -240,7 +233,7 @@
240233
if ($.isFunction(obj.settings.onShow)) {
241234
obj.settings.onShow(this.element, this);
242235
}
243-
$win.off('resize', null, 'tipsoResizeHandler');
236+
$win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
244237
});
245238
}
246239
}, obj.settings.delay);
@@ -253,42 +246,41 @@
253246

254247
window.clearTimeout(obj.timeout);
255248
obj.timeout = null;
256-
if (obj.mode !== 'tooltipHover') {
257-
if (obj.ieFade || obj.settings.animationIn === '' || obj.settings.animationOut === ''){
258-
tipso_bubble.stop(true, true).fadeOut(obj.settings.speed,
259-
function() {
260-
$(this).remove();
261-
if ($.isFunction(obj.settings.onHide) && obj.mode === 'show') {
262-
obj.settings.onHide(this.element, this);
263-
}
264-
obj.mode = 'hide';
265-
$win.off('resize', null, 'tipsoResizeHandler');
266-
});
267-
} else {
268-
tipso_bubble.stop(true, true)
269-
.removeClass('animated ' + obj.settings.animationIn)
270-
.addClass('noAnimation').removeClass('noAnimation')
271-
.addClass('animated ' + obj.settings.animationOut)
272-
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
273-
$(this).removeClass('animated ' + obj.settings.animationOut).remove();
274-
if ($.isFunction(obj.settings.onHide) && obj.mode === 'show') {
275-
obj.settings.onHide(this.element, this);
276-
}
277-
obj.mode = 'hide';
278-
$win.off('resize', null, 'tipsoResizeHandler');
279-
});
249+
obj.timeout = window.setTimeout(function() {
250+
if (obj.mode !== 'tooltipHover') {
251+
if (obj.ieFade || obj.settings.animationIn === '' || obj.settings.animationOut === ''){
252+
tipso_bubble.stop(true, true).fadeOut(obj.settings.speed,
253+
function() {
254+
$(this).remove();
255+
if ($.isFunction(obj.settings.onHide) && obj.mode === 'show') {
256+
obj.settings.onHide(this.element, this);
257+
}
258+
obj.mode = 'hide';
259+
$win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
260+
});
261+
} else {
262+
tipso_bubble.stop(true, true)
263+
.removeClass('animated ' + obj.settings.animationIn)
264+
.addClass('noAnimation').removeClass('noAnimation')
265+
.addClass('animated ' + obj.settings.animationOut)
266+
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
267+
$(this).removeClass('animated ' + obj.settings.animationOut).remove();
268+
if ($.isFunction(obj.settings.onHide) && obj.mode === 'show') {
269+
obj.settings.onHide(this.element, this);
270+
}
271+
obj.mode = 'hide';
272+
$win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
273+
});
274+
}
280275
}
281-
}
276+
}, obj.settings.hideDelay);
282277
},
283278
destroy: function() {
284279
var $e = this.element,
285280
$win = this.win,
286281
$doc = this.doc;
287282
$e.off('.' + pluginName);
288-
$win.off('resize', null, 'tipsoResizeHandler');
289-
if (isTouchSupported()) {
290-
$doc.off('click', null, 'closeTipso' );
291-
}
283+
$win.off('resize' + '.' + pluginName, null, 'tipsoResizeHandler');
292284
$e.removeData(pluginName);
293285
$e.removeClass('tipso_style').attr('title', this._title);
294286
},
@@ -358,16 +350,6 @@
358350
}
359351
});
360352

361-
function isTouchSupported() {
362-
var msTouchEnabled = window.navigator.msMaxTouchPoints;
363-
var generalTouchEnabled = "ontouchstart" in document.createElement(
364-
"div");
365-
if (msTouchEnabled || generalTouchEnabled) {
366-
return true;
367-
}
368-
return false;
369-
}
370-
371353
function realHeight(obj) {
372354
var clone = obj.clone();
373355
clone.css("visibility", "hidden");

‎src/tipso.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎tipso.jquery.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"mobile",
1111
"lightweight"
1212
],
13-
"version": "1.0.6",
13+
"version": "1.0.7",
1414
"author": {
1515
"name": "Bojan Petkovski",
1616
"url": "http://object505.com"

0 commit comments

Comments
 (0)