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.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;
}