diff --git a/index.js b/index.js index 9405a20..ec82492 100644 --- a/index.js +++ b/index.js @@ -289,6 +289,18 @@ export const createTooltip = ($el, content, options) => { $el._tooltip.isVisible = true; autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition); + if ( + options.hideOnClick && + (options.trigger.includes('click') || options.trigger.includes('manual')) + ) { + document.body.addEventListener('click', $el._tooltip.hideOnClickListener); + listeners.push({ + el: document.body, + event: 'click', + listener: $el._tooltip.hideOnClickListener, + }); + } + if (options.onShow) { options.onShow($el._tooltip); } @@ -337,39 +349,29 @@ export const createTooltip = ($el, content, options) => { ); }; - const hideOnClickListener = ({ target }) => { + $el._tooltip.hideOnClickListener = ({ target }) => { if ( $el._tooltip.isVisible && (options.hideOnClick === 'all' || $el.contains(target) || (options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.contains(target))) ) { - document.body.removeEventListener('click', hideOnClickListener); + document.body.removeEventListener('click', $el._tooltip.hideOnClickListener); $el._tooltip.hide(); } }; - const clickListener = () => { + $el._tooltip.clickListener = () => { if (!$el._tooltip.isVisible) { $el._tooltip.show(); - if (options.hideOnClick) { - setTimeout(() => { - document.body.addEventListener('click', hideOnClickListener); - listeners.push({ - el: document.body, - event: 'click', - listener: hideOnClickListener, - }); - }); - } } }; - const mouseEnterListener = () => { + $el._tooltip.mouseEnterListener = () => { $el._tooltip.show(); }; - const mouseLeaveListener = ({ relatedTarget }) => { + $el._tooltip.mouseLeaveListener = ({ relatedTarget }) => { if (options.interactive) { if ($el._tooltip.$tooltip.contains(relatedTarget)) { $el._tooltip.$tooltip.addEventListener( @@ -395,48 +397,36 @@ export const createTooltip = ($el, content, options) => { for (const trigger of options.trigger.split(' ')) { switch (trigger) { case 'mouseenter': { - $el.addEventListener('mouseenter', mouseEnterListener); + $el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener); listeners.push({ el: $el, event: 'mouseenter', - listener: mouseEnterListener, + listener: $el._tooltip.mouseEnterListener, }); - $el.addEventListener('mouseleave', mouseLeaveListener); + $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); listeners.push({ el: $el, event: 'mouseleave', - listener: mouseLeaveListener, + listener: $el._tooltip.mouseLeaveListener, }); break; } case 'click': { - $el.addEventListener('click', clickListener); + $el.addEventListener('click', $el._tooltip.clickListener); listeners.push({ el: $el, event: 'click', - listener: clickListener, + listener: $el._tooltip.clickListener, }); if (!options.interactive) { - $el.addEventListener('mouseleave', mouseLeaveListener); + $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); listeners.push({ el: $el, event: 'mouseleave', - listener: mouseLeaveListener, - }); - } - - break; - } - case 'manual': { - if (options.hideOnClick) { - document.body.addEventListener('click', hideOnClickListener); - listeners.push({ - el: document.body, - event: 'click', - listener: hideOnClickListener, + listener: $el._tooltip.mouseLeaveListener, }); }