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

Fix event listeners

This commit is contained in:
Valentin Silytuin 2025-04-02 00:38:44 +04:00
parent 4a8b4405b2
commit 06039e55c9
1 changed files with 25 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.js
View File

@ -289,6 +289,18 @@ export const createTooltip = ($el, content, options) => {
$el._tooltip.isVisible = true; $el._tooltip.isVisible = true;
autoUpdateCleanup = autoUpdate($el, $el._tooltip.$tooltip, $el._tooltip.updatePosition); 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) { if (options.onShow) {
options.onShow($el._tooltip); options.onShow($el._tooltip);
} }
@ -337,39 +349,29 @@ export const createTooltip = ($el, content, options) => {
); );
}; };
const hideOnClickListener = ({ target }) => { $el._tooltip.hideOnClickListener = ({ target }) => {
if ( if (
$el._tooltip.isVisible && $el._tooltip.isVisible &&
(options.hideOnClick === 'all' || (options.hideOnClick === 'all' ||
$el.contains(target) || $el.contains(target) ||
(options.hideOnClick !== 'toggle' && !$el._tooltip.$tooltip.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(); $el._tooltip.hide();
} }
}; };
const clickListener = () => { $el._tooltip.clickListener = () => {
if (!$el._tooltip.isVisible) { if (!$el._tooltip.isVisible) {
$el._tooltip.show(); $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(); $el._tooltip.show();
}; };
const mouseLeaveListener = ({ relatedTarget }) => { $el._tooltip.mouseLeaveListener = ({ relatedTarget }) => {
if (options.interactive) { if (options.interactive) {
if ($el._tooltip.$tooltip.contains(relatedTarget)) { if ($el._tooltip.$tooltip.contains(relatedTarget)) {
$el._tooltip.$tooltip.addEventListener( $el._tooltip.$tooltip.addEventListener(
@ -395,48 +397,36 @@ 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', mouseEnterListener); $el.addEventListener('mouseenter', $el._tooltip.mouseEnterListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'mouseenter', event: 'mouseenter',
listener: mouseEnterListener, listener: $el._tooltip.mouseEnterListener,
}); });
$el.addEventListener('mouseleave', mouseLeaveListener); $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'mouseleave', event: 'mouseleave',
listener: mouseLeaveListener, listener: $el._tooltip.mouseLeaveListener,
}); });
break; break;
} }
case 'click': { case 'click': {
$el.addEventListener('click', clickListener); $el.addEventListener('click', $el._tooltip.clickListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'click', event: 'click',
listener: clickListener, listener: $el._tooltip.clickListener,
}); });
if (!options.interactive) { if (!options.interactive) {
$el.addEventListener('mouseleave', mouseLeaveListener); $el.addEventListener('mouseleave', $el._tooltip.mouseLeaveListener);
listeners.push({ listeners.push({
el: $el, el: $el,
event: 'mouseleave', event: 'mouseleave',
listener: mouseLeaveListener, listener: $el._tooltip.mouseLeaveListener,
});
}
break;
}
case 'manual': {
if (options.hideOnClick) {
document.body.addEventListener('click', hideOnClickListener);
listeners.push({
el: document.body,
event: 'click',
listener: hideOnClickListener,
}); });
} }