fix(frontend): use-tooltip の呼び出し元の UI が無くなったら自動的に削除されるようにする (#11949)

* Update use-tooltip.ts

* Update CHANGELOG.md

2 files changed, 15 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee2f11b156..c6cadf54b6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@
 - Enhance: AiScriptでホストのアドレスを参照する定数`SERVER_URL`を追加
 - Enhance: モデレーションログ機能の強化
 - Enhance: ローカリゼーションの更新
+- Fix: リアクションしたユーザ一覧のUIが稀に左上に残ってしまう不具合を修正
 
 ### Server
 - Fix: Redisに古いバージョンのキャッシュが残っている場合、キャッシュが消えるまでの間通知が届かなくなる問題を修正
diff --git a/packages/frontend/src/scripts/use-tooltip.ts b/packages/frontend/src/scripts/use-tooltip.ts
index 0a82997728..17ea380db0 100644
--- a/packages/frontend/src/scripts/use-tooltip.ts
+++ b/packages/frontend/src/scripts/use-tooltip.ts
@@ -21,6 +21,8 @@ export function useTooltip(
 
 	let changeShowingState: (() => void) | null;
 
+	let autoHidingTimer;
+
 	const open = () => {
 		close();
 		if (!isHovering) return;
@@ -33,6 +35,16 @@ export function useTooltip(
 		changeShowingState = () => {
 			showing.value = false;
 		};
+
+		autoHidingTimer = window.setInterval(() => {
+			if (!document.body.contains(elRef.value)) {
+				if (!isHovering) return;
+				isHovering = false;
+				window.clearTimeout(timeoutId);
+				close();
+				window.clearInterval(autoHidingTimer);
+			}
+		}, 1000);
 	};
 
 	const close = () => {
@@ -53,6 +65,7 @@ export function useTooltip(
 		if (!isHovering) return;
 		isHovering = false;
 		window.clearTimeout(timeoutId);
+		window.clearInterval(autoHidingTimer);
 		close();
 	};
 
@@ -67,6 +80,7 @@ export function useTooltip(
 		if (!isHovering) return;
 		isHovering = false;
 		window.clearTimeout(timeoutId);
+		window.clearInterval(autoHidingTimer);
 		close();
 	};