hotomoe/packages/client/src/scripts/use-tooltip.ts

import { Ref, ref } from 'vue';
import { isScreenTouching, isTouchUsing } from './touch';

export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
	let isHovering = false;
	let timeoutId: number;

	let changeShowingState: (() => void) | null;

	const open = () => {
		close();
		if (!isHovering) return;

		// iOS(Androidも？)では、要素をタップした直後に(おせっかいで)mouseoverイベントを発火させたりするため、その対策
		// これが無いと、画面に触れてないのにツールチップが出たりしてしまう
		// TODO: タッチとマウス両方使っている環境では、マウス操作でツールチップ出せなくなるのをどうにかする
		if (isTouchUsing && !isScreenTouching) return;

		const showing = ref(true);
		onShow(showing);
		changeShowingState = () => {
			showing.value = false;
		};
	};

	const close = () => {
		if (changeShowingState != null) {
			changeShowingState();
			changeShowingState = null;
		}
	};

	const onMouseover = () => {
		if (isHovering) return;
		isHovering = true;
		timeoutId = window.setTimeout(open, 300);
	};

	const onMouseleave = () => {
		if (!isHovering) return;
		isHovering = false;
		window.clearTimeout(timeoutId);
		close();
	};

	return {
		onMouseover,
		onMouseleave,
	};
}