52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
const dwellTimeout = 400;
|
|
const persistTimeout = 150;
|
|
|
|
export const useTooltip = () => {
|
|
const activeElement = useState<HTMLElement | null>('tooltip:activeElement', () => null);
|
|
const activeHotkey = useState<string[] | null>('tooltip:activeHotkey', () => null);
|
|
const isVisible = useState<boolean>('tooltip:isVisible', () => false);
|
|
const dwellTimeoutId = useState<NodeJS.Timeout | null>('tooltip:dwellTimeoutId', () => null);
|
|
const closeTimeoutId = useState<NodeJS.Timeout | null>('tooltip:closeTimeout', () => null);
|
|
|
|
const show = (el: HTMLElement, hotkey?: string[]) => {
|
|
if (closeTimeoutId.value) {
|
|
clearTimeout(closeTimeoutId.value);
|
|
}
|
|
|
|
if (isVisible.value) {
|
|
activeElement.value = el;
|
|
activeHotkey.value = hotkey || null;
|
|
} else {
|
|
dwellTimeoutId.value = setTimeout(() => {
|
|
activeElement.value = el;
|
|
activeHotkey.value = hotkey || null;
|
|
isVisible.value = true;
|
|
}, dwellTimeout);
|
|
}
|
|
};
|
|
|
|
const hide = () => {
|
|
if (dwellTimeoutId.value) {
|
|
clearTimeout(dwellTimeoutId.value);
|
|
}
|
|
|
|
if (closeTimeoutId.value) {
|
|
clearTimeout(closeTimeoutId.value);
|
|
}
|
|
|
|
closeTimeoutId.value = setTimeout(() => {
|
|
isVisible.value = false;
|
|
activeElement.value = null;
|
|
closeTimeoutId.value = null;
|
|
}, persistTimeout);
|
|
};
|
|
|
|
return {
|
|
activeElement: readonly(activeElement),
|
|
activeHotkey: readonly(activeHotkey),
|
|
isVisible: readonly(isVisible),
|
|
show,
|
|
hide,
|
|
};
|
|
};
|