From 9b915a8a612cecc15106cdd2abb947408f60696e Mon Sep 17 00:00:00 2001 From: Gareth Griffiths Date: Mon, 20 Feb 2017 21:16:29 +0000 Subject: [PATCH 1/2] Add showEvents/hideEvents options --- src/tipso.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/tipso.js b/src/tipso.js index 83b9999..9f303ec 100644 --- a/src/tipso.js +++ b/src/tipso.js @@ -46,7 +46,9 @@ templateEngineFunc: null, //A function that compiles and renders the content onBeforeShow : null, onShow : null, - onHide : null + onHide : null, + showEvents : 'mouseover', //The events that trigger the tooltip to be shown + hideEvents : 'mouseout' //The events that trigger the tooltip to be hidden }; function Plugin(element, options) { @@ -112,17 +114,29 @@ $doc = this.doc; $e.addClass('tipso_style').removeAttr('title'); + var showEvents = (typeof obj.settings.showEvents == 'object') ? obj.settings.showEvents : obj.settings.showEvents.split(' '); + for (var i in showEvents) { + showEvents[i] = String(showEvents[ i ] + '.' + pluginName).trim(); + } + showEvents = showEvents.join( ' ' ); + + var hideEvents = (typeof obj.settings.hideEvents == 'object') ? obj.settings.hideEvents : obj.settings.hideEvents.split(' '); + for (var i in hideEvents) { + hideEvents[i] = String(hideEvents[ i ] + '.' + pluginName).trim(); + } + hideEvents = hideEvents.join( ' ' ); + if (obj.settings.tooltipHover) { var waitForHover = null, hoverHelper = null; - $e.on('mouseover' + '.' + pluginName, function() { + $e.on(showEvents, function() { clearTimeout(waitForHover); clearTimeout(hoverHelper); hoverHelper = setTimeout(function(){ obj.show(); }, 150); }); - $e.on('mouseout' + '.' + pluginName, function() { + $e.on(hideEvents, function() { clearTimeout(waitForHover); clearTimeout(hoverHelper); waitForHover = setTimeout(function(){ @@ -143,10 +157,10 @@ ; }); } else { - $e.on('mouseover' + '.' + pluginName, function() { + $e.on(showEvents, function() { obj.show(); }); - $e.on('mouseout' + '.' + pluginName, function() { + $e.on(hideEvents, function() { obj.hide(); }); } From 6ac8ec7fbdc244145c87004346f21dd811eb018c Mon Sep 17 00:00:00 2001 From: Gareth Griffiths Date: Mon, 20 Feb 2017 21:18:46 +0000 Subject: [PATCH 2/2] Update README: Add showEvents/hideEvents options --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 80fafb1..bf84497 100644 --- a/README.md +++ b/README.md @@ -69,6 +69,8 @@ To use css3 animation effects please include [Animate.css](http://daneden.github | onBeforeShow | function(){} | Function to be executed before tipso is shown | | onShow | function(){} | Function to be executed after tipso is shown | | onHide | function(){} | Function to be executed after tipso is hidden | +| showEvents | 'mouseover' | Array or space separated list of events that should trigger the tooltip to show | +| hideEvents | 'mouseout' | Array or space separated list of events that should trigger the tooltip to hide | > Additionaly you can use `data-tipso` instead of the title attribute for the tooltip content ( set `useTitle: false` )