fix tooltip being shown when parent is unmounted

This commit is contained in:
geoffrey45 2022-09-04 16:07:05 +03:00
parent b7c158a785
commit de1c232973
2 changed files with 14 additions and 4 deletions

View File

@ -117,7 +117,12 @@ button {
border-radius: $smaller;
padding: $smaller;
font-size: 0.85rem;
display: none;
visibility: hidden;
position: absolute;
z-index: 300;
}
#tooltip[data-popper-reference-hidden] {
visibility: hidden !important;
pointer-events: none;
}

View File

@ -14,7 +14,7 @@ export default {
setTimeout(() => {
if (isHovered) {
tooltip.innerText = binding.value;
tooltip.style.display = "unset";
tooltip.style.visibility = "visible";
createPopper(el, tooltip, {
placement: "top",
@ -25,6 +25,10 @@ export default {
offset: [0, 10],
},
},
{
name: "hide",
enabled: true,
},
],
});
}
@ -33,14 +37,15 @@ export default {
el.addEventListener("mouseout", () => {
isHovered = false;
tooltip.style.display = "none";
tooltip.style.visibility = "hidden";
});
},
beforeUnmount(el: HTMLElement) {
const tooltip = document.getElementById("tooltip") as HTMLElement;
tooltip.style.display = "none";
tooltip.style.visibility = "hidden";
el.removeEventListener("mouseover", () => {});
el.removeEventListener("mouseout", () => {});
},
} as Directive;