Files
tools-app/src/composables/useTooltip.js

35 lines
766 B
JavaScript

import { reactive } from 'vue'
export const tooltipState = reactive({
isVisible: false,
text: '',
targetRect: null
})
export function showTooltip(el, text) {
if (!text) return;
if (!el.hasAttribute('aria-label')) {
el.setAttribute('aria-label', text);
}
const rect = el.getBoundingClientRect();
tooltipState.targetRect = {
top: rect.top,
left: rect.left,
width: rect.width,
bottom: rect.bottom
};
tooltipState.text = text;
tooltipState.isVisible = true;
}
// Hide tooltip on any scroll event to avoid floating detached tooltips
if (typeof window !== 'undefined') {
window.addEventListener('scroll', hideTooltip, { passive: true, capture: true })
}
export function hideTooltip() {
tooltipState.isVisible = false;
}