feat: check if text is ellipsised before attaching tooltip

This commit is contained in:
geoffrey45
2022-09-24 08:33:33 +03:00
committed by Mungai Njoroge
parent eb8c4e5628
commit 1c3998aa25
+24 -9
View File
@@ -46,8 +46,21 @@ function hideTooltip() {
tooltip.style.visibility = "hidden";
}
export default {
mounted(el: HTMLElement, binding) {
function getFullWidth(el: HTMLElement) {
// display el as inline-block to get the correct width
el.style.display = "inline-block";
el.style.visibility = "hidden";
document.getElementsByTagName("body")[0].appendChild(el);
const width = el.offsetWidth;
el.remove();
return width;
}
export default (el: HTMLElement) => {
const fullWidth = getFullWidth(el.cloneNode(true) as HTMLElement);
if (fullWidth <= el.offsetWidth) return;
if (!tooltip) {
tooltip = getTooltip();
}
@@ -76,11 +89,13 @@ export default {
hideTooltip();
});
});
},
beforeUnmount(el: HTMLElement) {
hideTooltip();
};
el.removeEventListener("mouseover", () => {});
el.removeEventListener("mouseout", () => {});
},
} as Directive;
// } as Directive;
// beforeUnmount(el: HTMLElement) {
// // hideTooltip();
// el.removeEventListener("mouseover", () => {});
// el.removeEventListener("mouseout", () => {});
// },