public/tooltip
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Корректная работа сообытий mouseenter/mouseleave на тач-устройствах

Browse Source
This commit is contained in:
Valentin Silyutin
2026-01-19 13:02:50 +04:00
parent ccd4fc13a9
commit 9d5ed83f5b
1 changed files with 22 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
index.js
View File

@@ -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.show();
}; };
$el._tooltip.mouseLeaveListener = ({ relatedTarget }) => { $el._tooltip.mouseLeaveListener = (event) => {
if (options.interactive && relatedTarget && $el._tooltip.$tooltip?.contains(relatedTarget)) { if (event.pointerType !== 'mouse') {
return;
}
if (options.interactive && event.relatedTarget && $el._tooltip.$tooltip?.contains(event.relatedTarget)) {
$el._tooltip.$tooltip.addEventListener( $el._tooltip.$tooltip.addEventListener(
'mouseleave', 'pointerleave',
({ relatedTarget }) => { (event) => {
if (!relatedTarget || !$el.contains(relatedTarget)) { if (event.pointerType !== 'mouse') {
return;
}
if (!event.relatedTarget || !$el.contains(event.relatedTarget)) {
$el._tooltip.hide(); $el._tooltip.hide();
} }
}, },
@@ -432,11 +442,11 @@ export const createTooltip = ($el, content, options) => {
for (const trigger of options.trigger.split(' ')) { for (const trigger of options.trigger.split(' ')) {
switch (trigger) { switch (trigger) {
case 'mouseenter': { case 'mouseenter': {
$el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener); $el.addEventListener('pointerenter', $el._tooltip.mouseEnterListener);
listeners.push({ el: $el, event: 'mouseenter', listener: $el._tooltip.mouseEnterListener }); listeners.push({ el: $el, event: 'pointerenter', listener: $el._tooltip.mouseEnterListener });
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
listeners.push({ el: $el, event: 'mouseleave', listener: $el._tooltip.mouseLeaveListener }); listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
break; break;
} }
case 'click': { case 'click': {
@@ -444,8 +454,8 @@ export const createTooltip = ($el, content, options) => {
listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener }); listeners.push({ el: $el, event: 'click', listener: $el._tooltip.clickListener });
if (!options.interactive) { if (!options.interactive) {
$el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener); $el.addEventListener('pointerleave', $el._tooltip.mouseLeaveListener);
listeners.push({ el: $el, event: 'mouseleave', listener: $el._tooltip.mouseLeaveListener }); listeners.push({ el: $el, event: 'pointerleave', listener: $el._tooltip.mouseLeaveListener });
} }
break; break;
} }