From e0f7b733af3f26440bdde9963d809d5160a4f5fa Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sat, 28 Feb 2026 00:29:26 +0900
Subject: [PATCH] add tooltip

---
 src/views/GameLog/columns.jsx | 144 ++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 68 deletions(-)

diff --git a/src/views/GameLog/columns.jsx b/src/views/GameLog/columns.jsx
index 6abf86e5..8080cf4a 100644
--- a/src/views/GameLog/columns.jsx
+++ b/src/views/GameLog/columns.jsx
@@ -1,11 +1,7 @@
 import Location from '../../components/Location.vue';
 import { Badge } from '../../components/ui/badge';
 import { Button } from '../../components/ui/button';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger
-} from '../../components/ui/tooltip';
+import { TooltipWrapper } from '../../components/ui/tooltip';
 import { ArrowUpDown, FileText, Trash2, X } from 'lucide-vue-next';
 import { storeToRefs } from 'pinia';
 
@@ -64,14 +60,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                 const longText = formatDateFilter(createdAt, 'long');
 
                 return (
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <span>{shortText}</span>
-                        </TooltipTrigger>
-                        <TooltipContent side="right">
-                            <span>{longText}</span>
-                        </TooltipContent>
-                    </Tooltip>
+                    <TooltipWrapper content={longText} side="right">
+                        <span>{shortText}</span>
+                    </TooltipWrapper>
                 );
             }
         },
@@ -160,17 +151,24 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
 
                 if (original.type === 'Event') {
                     return (
-                        <span class="block w-full min-w-0 truncate">
-                            {original.data}
-                        </span>
+                        <TooltipWrapper content={original.data} side="bottom">
+                            <span class="block w-full min-w-0 truncate">
+                                {original.data}
+                            </span>
+                        </TooltipWrapper>
                     );
                 }
 
                 if (original.type === 'External') {
                     return (
-                        <span class="block w-full min-w-0 truncate">
-                            {original.message}
-                        </span>
+                        <TooltipWrapper
+                            content={original.message}
+                            side="bottom"
+                        >
+                            <span class="block w-full min-w-0 truncate">
+                                {original.message}
+                            </span>
+                        </TooltipWrapper>
                     );
                 }
 
@@ -179,24 +177,31 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                         original.videoId !== 'LSMedia' &&
                         original.videoId !== 'PopcornPalace';
                     const label = original.videoName || original.videoUrl;
+                    const tooltipText = original.videoId
+                        ? `${original.videoId}: ${label}`
+                        : label;
                     return (
-                        <span class="block w-full min-w-0 truncate cursor-pointer">
-                            {original.videoId ? (
-                                <span class="mr-1.5">{original.videoId}:</span>
-                            ) : null}
-                            {showLink ? (
-                                <span
-                                    class="cursor-pointer"
-                                    onClick={() =>
-                                        openExternalLink(original.videoUrl)
-                                    }
-                                >
-                                    {label}
-                                </span>
-                            ) : (
-                                <span>{original.videoName}</span>
-                            )}
-                        </span>
+                        <TooltipWrapper content={tooltipText} side="bottom">
+                            <span class="block w-full min-w-0 truncate cursor-pointer">
+                                {original.videoId ? (
+                                    <span class="mr-1.5">
+                                        {original.videoId}:
+                                    </span>
+                                ) : null}
+                                {showLink ? (
+                                    <span
+                                        class="cursor-pointer"
+                                        onClick={() =>
+                                            openExternalLink(original.videoUrl)
+                                        }
+                                    >
+                                        {label}
+                                    </span>
+                                ) : (
+                                    <span>{original.videoName}</span>
+                                )}
+                            </span>
+                        </TooltipWrapper>
                     );
                 }
 
@@ -205,16 +210,21 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                     original.type === 'StringLoad'
                 ) {
                     return (
-                        <span class="block w-full min-w-0 truncate cursor-pointer">
-                            <span
-                                class="cursor-pointer"
-                                onClick={() =>
-                                    openExternalLink(original.resourceUrl)
-                                }
-                            >
-                                {original.resourceUrl}
+                        <TooltipWrapper
+                            content={original.resourceUrl}
+                            side="bottom"
+                        >
+                            <span class="block w-full min-w-0 truncate cursor-pointer">
+                                <span
+                                    class="cursor-pointer"
+                                    onClick={() =>
+                                        openExternalLink(original.resourceUrl)
+                                    }
+                                >
+                                    {original.resourceUrl}
+                                </span>
                             </span>
-                        </span>
+                        </TooltipWrapper>
                     );
                 }
 
@@ -227,9 +237,11 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                 }
 
                 return (
-                    <span class="block w-full min-w-0 truncate">
-                        {original.data}
-                    </span>
+                    <TooltipWrapper content={original.data} side="bottom">
+                        <span class="block w-full min-w-0 truncate">
+                            {original.data}
+                        </span>
+                    </TooltipWrapper>
                 );
             }
         },
@@ -272,26 +284,22 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
                             </button>
                         ) : null}
                         {canShowPrevious ? (
-                            <Tooltip>
-                                <TooltipTrigger asChild>
-                                    <button
-                                        type="button"
-                                        class="inline-flex h-6 items-center justify-center text-muted-foreground hover:text-foreground"
-                                        onClick={() =>
-                                            showPreviousInstancesInfoDialog(
-                                                original.location
-                                            )
-                                        }
-                                    >
-                                        <FileText class="h-4 w-4" />
-                                    </button>
-                                </TooltipTrigger>
-                                <TooltipContent side="top">
-                                    <span>
-                                        {t('dialog.previous_instances.info')}
-                                    </span>
-                                </TooltipContent>
-                            </Tooltip>
+                            <TooltipWrapper
+                                content={t('dialog.previous_instances.info')}
+                                side="top"
+                            >
+                                <button
+                                    type="button"
+                                    class="inline-flex h-6 items-center justify-center text-muted-foreground hover:text-foreground"
+                                    onClick={() =>
+                                        showPreviousInstancesInfoDialog(
+                                            original.location
+                                        )
+                                    }
+                                >
+                                    <FileText class="h-4 w-4" />
+                                </button>
+                            </TooltipWrapper>
                         ) : null}
                     </div>
                 );