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

Fix event listeners

Browse Source
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
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;
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,
});
}