diff --git a/app/game-frontend/src/views/BestGeneralView.vue b/app/game-frontend/src/views/BestGeneralView.vue
index 56d652cc..269cb6f4 100644
--- a/app/game-frontend/src/views/BestGeneralView.vue
+++ b/app/game-frontend/src/views/BestGeneralView.vue
@@ -2,6 +2,7 @@
 import { onMounted, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
+import RichTooltip from '../components/ui/RichTooltip.vue';
 import { resolveGeneralIconUrl, useDefaultGeneralIcon } from '../utils/generalIcon';
 import { trpc } from '../utils/trpc';
 
@@ -138,7 +139,14 @@ watch(viewMode, () => {
                 <h2 class="rankType legacy-bg1">{{ section.title }}</h2>
                 <ul>
                     <li v-for="(entry, index) in section.entries" :key="`${entry.itemKey}:${index}`" class="no-value">
-                        <div class="hall-rank legacy-bg2 item-name" :title="entry.itemInfo">{{ entry.itemName }}</div>
+                        <div class="hall-rank legacy-bg2 item-name">
+                            <RichTooltip
+                                :description="entry.itemInfo"
+                                :test-id="`best-general-item-${section.slot}-${entry.itemKey}-${index}`"
+                            >
+                                <span class="item-name-label">{{ entry.itemName }}</span>
+                            </RichTooltip>
+                        </div>
                         <div class="hall-img">
                             <img
                                 class="generalIcon"
@@ -320,6 +328,12 @@ watch(viewMode, () => {
     white-space: nowrap;
 }
 
+.hall-rank.item-name :deep(.rich-tooltip-trigger) {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .hall-img {
     height: 64px;
 }
diff --git a/tools/frontend-legacy-parity/visual-parity.spec.ts b/tools/frontend-legacy-parity/visual-parity.spec.ts
index 757f5811..173dff83 100644
--- a/tools/frontend-legacy-parity/visual-parity.spec.ts
+++ b/tools/frontend-legacy-parity/visual-parity.spec.ts
@@ -778,7 +778,18 @@ test.describe('best general legacy parity', () => {
 
             const itemName = page.locator('.item-name').first();
             await itemName.hover();
-            await expect(itemName).toHaveAttribute('title', '최고의 명마');
+            const itemTooltip = page.locator('.tippy-box[data-theme~="sammo-rich"]:visible');
+            await expect(itemTooltip).toContainText('최고의 명마');
+            await expect(itemName.locator('[data-rich-tooltip^="best-general-item-"]')).toHaveAttribute(
+                'tabindex',
+                '0'
+            );
+            if (artifactRoot) {
+                await page.screenshot({
+                    path: resolve(artifactRoot, `best-general-item-tooltip-${viewport.name}.png`),
+                    animations: 'disabled',
+                });
+            }
         });
     }