diff --git a/index.js b/index.js index 9d3624f..b76a7bf 100644 --- a/index.js +++ b/index.js @@ -400,16 +400,26 @@ export const createTooltip = ($el, content, options) => { } }; - $el._tooltip.mouseEnterListener = () => { + $el._tooltip.mouseEnterListener = (event) => { + if (event.pointerType !== 'mouse') { + return; + } $el._tooltip.show(); }; - $el._tooltip.mouseLeaveListener = ({ relatedTarget }) => { - if (options.interactive && relatedTarget && $el._tooltip.$tooltip?.contains(relatedTarget)) { + $el._tooltip.mouseLeaveListener = (event) => { + if (event.pointerType !== 'mouse') { + return; + } + + if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) { $el._tooltip.$tooltip.addEventListener( - 'mouseleave', - ({ relatedTarget }) => { - if (!relatedTarget || !$el.contains(relatedTarget)) { + 'pointerleave', + (event) => { + if (event.pointerType !== 'mouse') { + return; + } + if (!event.relatedTarget || !$el.contains(event.relatedTarget)) { $el._tooltip.hide(); } }, @@ -432,11 +442,11 @@ export const createTooltip = ($el, content, options) => { for (const trigger of options.trigger.split(' ')) { switch (trigger) { case 'mouseenter': { - $el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener); - listeners.push({ el: $el, event: 'mouseenter', listener: $el._tooltip.mouseEnterListener }); + $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener); + listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener }); - $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); - listeners.push({ el: $el, event: 'mouseleave', listener: $el._tooltip.mouseLeaveListener }); + $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener); + listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener }); break; } case 'click': { @@ -444,8 +454,8 @@ export const createTooltip = ($el, content, options) => { listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener }); if (!options.interactive) { - $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); - listeners.push({ el: $el, event: 'mouseleave', listener: $el._tooltip.mouseLeaveListener }); + $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener); + listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener }); } break; }