From 5322c638895a934c1ce220fefed54f5077d2a49e Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Thu, 2 Jul 2026 19:53:01 +0800
Subject: [PATCH] fix(web): trim redundant and incorrect tooltips (#1316)

* fix(web): trim redundant and incorrect tooltips

Drop hover tooltips that only restated a button's accessible label, and remove the permission-pill tooltip that described cycling modes while the control actually opens a dropdown. Keep tooltips that reveal truncated text or explain status.

* fix(web): remove remaining ChatHeader tooltips

Drop the session-title, git-branch, and open-PR tooltips in ChatHeader so the header has no hover tooltips. Broaden the changeset wording to cover the wider trim.

* fix(web): keep tooltips from getting stuck on unmount

Tooltip attached its mouseleave listener to the slotted trigger element once, so if that element was removed (e.g. a v-if toggled while hovering a tool-call path) the open bubble never received mouseleave and stranded on screen. Re-sync the listener to the live slotted element via a MutationObserver and close the tooltip whenever the trigger changes.

* chore: add changeset for stuck-tooltip fix

* fix(web): restore session title tooltip in ChatHeader

The session title is truncated with an ellipsis when it exceeds the header width, so the tooltip was the only way to read the full name from the header. Restoring it keeps the truncation-revealing hint while the redundant git/branch/open-PR tooltips stay removed.
---
 .changeset/fix-stuck-web-tooltip.md           |   5 +
 .changeset/trim-redundant-web-tooltips.md     |   5 +
 apps/kimi-web/src/App.vue                     |  17 +--
 apps/kimi-web/src/components/FilePreview.vue  |  90 +++++-------
 apps/kimi-web/src/components/Sidebar.vue      |  93 ++++++------
 .../src/components/WorkspaceGroup.vue         |  42 +++---
 .../src/components/chat/ApprovalCard.vue      |  20 ++-
 .../src/components/chat/ChatHeader.vue        |  90 ++++++------
 .../kimi-web/src/components/chat/ChatPane.vue |  72 ++++------
 .../kimi-web/src/components/chat/Composer.vue | 132 ++++++++----------
 .../kimi-web/src/components/chat/DiffView.vue |  10 +-
 .../src/components/chat/OpenInMenu.vue        |  22 ++-
 .../src/components/chat/QuestionCard.vue      |  21 ++-
 .../components/mobile/MobileSwitcherSheet.vue |  54 ++++---
 .../src/components/ui/PanelHeader.vue         |  20 ++-
 apps/kimi-web/src/components/ui/Tooltip.vue   |  60 +++++---
 apps/kimi-web/src/i18n/locales/en/status.ts   |   3 -
 apps/kimi-web/src/i18n/locales/zh/status.ts   |   3 -
 18 files changed, 353 insertions(+), 406 deletions(-)
 create mode 100644 .changeset/fix-stuck-web-tooltip.md
 create mode 100644 .changeset/trim-redundant-web-tooltips.md

diff --git a/.changeset/fix-stuck-web-tooltip.md b/.changeset/fix-stuck-web-tooltip.md
new file mode 100644
index 000000000..9f9fc042b
--- /dev/null
+++ b/.changeset/fix-stuck-web-tooltip.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Fix web tooltips that could get stuck on screen when their trigger element is removed while open.
diff --git a/.changeset/trim-redundant-web-tooltips.md b/.changeset/trim-redundant-web-tooltips.md
new file mode 100644
index 000000000..ee1038b2d
--- /dev/null
+++ b/.changeset/trim-redundant-web-tooltips.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Trim redundant and incorrect tooltips in the web UI.
diff --git a/apps/kimi-web/src/App.vue b/apps/kimi-web/src/App.vue
index 48224498e..d89debde7 100644
--- a/apps/kimi-web/src/App.vue
+++ b/apps/kimi-web/src/App.vue
@@ -40,7 +40,6 @@ import type { AppConfig, ThinkingLevel } from './api/types';
 import Button from './components/ui/Button.vue';
 import IconButton from './components/ui/IconButton.vue';
 import Icon from './components/ui/Icon.vue';
-import Tooltip from './components/ui/Tooltip.vue';
 
 // Hydrate the server-transport credential (fragment token or sessionStorage)
 // BEFORE the client connects, so the first REST/WS calls already carry it.
@@ -625,15 +624,13 @@ function openPr(url: string): void {
         @update:width="sessionColWidth = $event"
       />
       <div v-if="sidebarCollapsed" class="sidebar-rail">
-        <Tooltip :text="t('sidebar.expandSidebar')">
-          <IconButton
-            size="sm"
-            :label="t('sidebar.expandSidebar')"
-            @click="toggleSidebarCollapse"
-          >
-            <Icon name="panel-expand" size="sm" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          size="sm"
+          :label="t('sidebar.expandSidebar')"
+          @click="toggleSidebarCollapse"
+        >
+          <Icon name="panel-expand" size="sm" />
+        </IconButton>
       </div>
     </template>
 
diff --git a/apps/kimi-web/src/components/FilePreview.vue b/apps/kimi-web/src/components/FilePreview.vue
index 8b65cf4c8..1888c2127 100644
--- a/apps/kimi-web/src/components/FilePreview.vue
+++ b/apps/kimi-web/src/components/FilePreview.vue
@@ -482,60 +482,46 @@ function truncatePath(path: string, maxLen = 55): string {
           <span v-if="searchQuery.trim()" class="fp-search-count">
             {{ searchMatches.length }}
           </span>
-          <Tooltip :text="t('filePreview.prevMatch')">
-            <IconButton size="sm" :disabled="searchMatches.length === 0" :label="t('filePreview.prevMatch')" @click="nextMatch(-1)">
-              <Icon name="arrow-up" size="md" />
-            </IconButton>
-          </Tooltip>
-          <Tooltip :text="t('filePreview.nextMatch')">
-            <IconButton size="sm" :disabled="searchMatches.length === 0" :label="t('filePreview.nextMatch')" @click="nextMatch(1)">
-              <Icon name="arrow-down" size="md" />
-            </IconButton>
-          </Tooltip>
+          <IconButton size="sm" :disabled="searchMatches.length === 0" :label="t('filePreview.prevMatch')" @click="nextMatch(-1)">
+            <Icon name="arrow-up" size="md" />
+          </IconButton>
+          <IconButton size="sm" :disabled="searchMatches.length === 0" :label="t('filePreview.nextMatch')" @click="nextMatch(1)">
+            <Icon name="arrow-down" size="md" />
+          </IconButton>
         </div>
         <!-- Icon actions: text labels made the header wrap to two rows at the
-             default panel width — icons + title tooltips keep it single-line. -->
-        <Tooltip :text="copiedPath ? t('filePreview.copied') : t('filePreview.copyPath')">
-          <IconButton size="sm" :class="{ copied: copiedPath }" :label="copiedPath ? t('filePreview.copied') : t('filePreview.copyPath')" @click="copyPath">
-            <Icon v-if="!copiedPath" name="link" size="md" />
-            <Icon v-else class="fp-check" name="check" size="md" />
-          </IconButton>
-        </Tooltip>
-        <Tooltip :text="t('filePreview.openInEditor')">
-          <IconButton v-if="externalActions" size="sm" :label="t('filePreview.openInEditor')" @click="emit('openExternal')">
-            <Icon name="external-link" size="md" />
-          </IconButton>
-        </Tooltip>
-        <Tooltip :text="t('filePreview.reveal')">
-          <IconButton v-if="externalActions" size="sm" :label="t('filePreview.reveal')" @click="emit('reveal')">
-            <Icon name="folder" size="md" />
-          </IconButton>
-        </Tooltip>
-        <Tooltip :text="t('filePreview.download')">
-          <a
-            v-if="downloadUrl"
-            class="fp-download"
-            :href="downloadUrl"
-            target="_blank"
-            rel="noreferrer"
-            download
-            :aria-label="t('filePreview.download')"
-          >
-            <Icon name="download" size="md" />
-          </a>
-        </Tooltip>
-        <Tooltip :text="copied ? t('filePreview.copied') : t('filePreview.copy')">
-          <IconButton
-            v-if="!file.isBinary && contentKind !== 'image'"
-            size="sm"
-            :class="{ copied }"
-            :label="copied ? t('filePreview.copied') : t('filePreview.copy')"
-            @click="copyContent"
-          >
-            <Icon v-if="!copied" name="copy" size="md" />
-            <Icon v-else class="fp-check" name="check" size="md" />
-          </IconButton>
-        </Tooltip>
+             default panel width — icon-only buttons keep it single-line. -->
+        <IconButton size="sm" :class="{ copied: copiedPath }" :label="copiedPath ? t('filePreview.copied') : t('filePreview.copyPath')" @click="copyPath">
+          <Icon v-if="!copiedPath" name="link" size="md" />
+          <Icon v-else class="fp-check" name="check" size="md" />
+        </IconButton>
+        <IconButton v-if="externalActions" size="sm" :label="t('filePreview.openInEditor')" @click="emit('openExternal')">
+          <Icon name="external-link" size="md" />
+        </IconButton>
+        <IconButton v-if="externalActions" size="sm" :label="t('filePreview.reveal')" @click="emit('reveal')">
+          <Icon name="folder" size="md" />
+        </IconButton>
+        <a
+          v-if="downloadUrl"
+          class="fp-download"
+          :href="downloadUrl"
+          target="_blank"
+          rel="noreferrer"
+          download
+          :aria-label="t('filePreview.download')"
+        >
+          <Icon name="download" size="md" />
+        </a>
+        <IconButton
+          v-if="!file.isBinary && contentKind !== 'image'"
+          size="sm"
+          :class="{ copied }"
+          :label="copied ? t('filePreview.copied') : t('filePreview.copy')"
+          @click="copyContent"
+        >
+          <Icon v-if="!copied" name="copy" size="md" />
+          <Icon v-else class="fp-check" name="check" size="md" />
+        </IconButton>
       </PanelHeader>
 
       <!-- Body: Markdown -->
diff --git a/apps/kimi-web/src/components/Sidebar.vue b/apps/kimi-web/src/components/Sidebar.vue
index 4b4911b1a..c8c92ef2b 100644
--- a/apps/kimi-web/src/components/Sidebar.vue
+++ b/apps/kimi-web/src/components/Sidebar.vue
@@ -23,7 +23,6 @@ import IconButton from './ui/IconButton.vue';
 import Icon from './ui/Icon.vue';
 import Menu from './ui/Menu.vue';
 import MenuItem from './ui/MenuItem.vue';
-import Tooltip from './ui/Tooltip.vue';
 import { useConfirmDialog } from '../composables/useConfirmDialog';
 
 const { t } = useI18n();
@@ -553,24 +552,20 @@ onBeforeUnmount(() => {
           <span class="ch-name">Kimi Code<span v-if="isDev" class="ch-endpoint"> · {{ endpoint }}</span></span>
           <InternalBuildBanner />
         </div>
-        <Tooltip :text="t('sidebar.collapseSidebar')">
-          <IconButton
-            size="sm"
-            :label="t('sidebar.collapseSidebar')"
-            @click.stop="emit('collapse')"
-          >
-            <Icon name="panel-collapse" />
-          </IconButton>
-        </Tooltip>
-        <Tooltip :text="t('settings.title')">
-          <IconButton
-            size="sm"
-            :label="t('settings.title')"
-            @click.stop="emit('openSettings')"
-          >
-            <Icon name="settings" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          size="sm"
+          :label="t('sidebar.collapseSidebar')"
+          @click.stop="emit('collapse')"
+        >
+          <Icon name="panel-collapse" />
+        </IconButton>
+        <IconButton
+          size="sm"
+          :label="t('settings.title')"
+          @click.stop="emit('openSettings')"
+        >
+          <Icon name="settings" />
+        </IconButton>
       </div>
 
       <!-- Session search — opens the Spotlight-style search dialog -->
@@ -585,16 +580,14 @@ onBeforeUnmount(() => {
           <Icon name="chat-new" />
           <span>{{ t('sidebar.newChat') }}</span>
         </button>
-        <Tooltip :text="t('sidebar.newWorkspace')">
-          <IconButton
-            v-if="showNewWorkspaceButton"
-            size="sm"
-            :label="t('sidebar.newWorkspace')"
-            @click.stop="emit('addWorkspace')"
-          >
-            <Icon name="folder" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          v-if="showNewWorkspaceButton"
+          size="sm"
+          :label="t('sidebar.newWorkspace')"
+          @click.stop="emit('addWorkspace')"
+        >
+          <Icon name="folder" />
+        </IconButton>
       </div>
 
       <!-- Session list — grouped by workspace -->
@@ -609,29 +602,25 @@ onBeforeUnmount(() => {
           <div class="side-section-label">
             <span class="side-section-title">{{ t('sidebar.workspaces') }}</span>
             <div class="side-section-actions">
-              <Tooltip :text="allCollapsed ? t('sidebar.expandAll') : t('sidebar.collapseAll')">
-                <IconButton
-                  class="side-section-toggle"
-                  size="sm"
-                  :label="allCollapsed ? t('sidebar.expandAll') : t('sidebar.collapseAll')"
-                  @click.stop="allCollapsed ? expandAllWorkspaces() : collapseAllWorkspaces()"
-                >
-                  <Icon v-if="allCollapsed" name="expand" />
-                  <Icon v-else name="collapse" />
-                </IconButton>
-              </Tooltip>
-              <Tooltip :text="t('sidebar.options')">
-                <IconButton
-                  class="side-section-toggle side-section-kebab"
-                  size="sm"
-                  :label="t('sidebar.options')"
-                  aria-haspopup="menu"
-                  :aria-expanded="sectionMenuOpen"
-                  @click.stop="toggleSectionMenu($event)"
-                >
-                  <Icon name="dots-horizontal" />
-                </IconButton>
-              </Tooltip>
+              <IconButton
+                class="side-section-toggle"
+                size="sm"
+                :label="allCollapsed ? t('sidebar.expandAll') : t('sidebar.collapseAll')"
+                @click.stop="allCollapsed ? expandAllWorkspaces() : collapseAllWorkspaces()"
+              >
+                <Icon v-if="allCollapsed" name="expand" />
+                <Icon v-else name="collapse" />
+              </IconButton>
+              <IconButton
+                class="side-section-toggle side-section-kebab"
+                size="sm"
+                :label="t('sidebar.options')"
+                aria-haspopup="menu"
+                :aria-expanded="sectionMenuOpen"
+                @click.stop="toggleSectionMenu($event)"
+              >
+                <Icon name="dots-horizontal" />
+              </IconButton>
             </div>
           </div>
           <div
diff --git a/apps/kimi-web/src/components/WorkspaceGroup.vue b/apps/kimi-web/src/components/WorkspaceGroup.vue
index 34a093eef..eaff3dfa4 100644
--- a/apps/kimi-web/src/components/WorkspaceGroup.vue
+++ b/apps/kimi-web/src/components/WorkspaceGroup.vue
@@ -108,30 +108,26 @@ function onHeaderDragStart(event: DragEvent): void {
           @click.stop
         />
 
-        <Tooltip :text="t('sidebar.options')">
-          <IconButton
-            class="gh-more"
-            :class="{ open: wsMenuOpenId === group.workspace.id }"
-            size="sm"
-            :label="t('sidebar.options')"
-            aria-haspopup="menu"
-            :aria-expanded="wsMenuOpenId === group.workspace.id"
-            @click.stop="emit('toggleWsMenu', group.workspace, $event)"
-          >
-            <Icon name="dots-horizontal" size="sm" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          class="gh-more"
+          :class="{ open: wsMenuOpenId === group.workspace.id }"
+          size="sm"
+          :label="t('sidebar.options')"
+          aria-haspopup="menu"
+          :aria-expanded="wsMenuOpenId === group.workspace.id"
+          @click.stop="emit('toggleWsMenu', group.workspace, $event)"
+        >
+          <Icon name="dots-horizontal" size="sm" />
+        </IconButton>
 
-        <Tooltip :text="t('workspace.newInGroup')">
-          <IconButton
-            class="gh-add"
-            size="sm"
-            :label="t('workspace.newInGroup')"
-            @click.stop="emit('createInWorkspace', group.workspace.id)"
-          >
-            <Icon name="chat-new" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          class="gh-add"
+          size="sm"
+          :label="t('workspace.newInGroup')"
+          @click.stop="emit('createInWorkspace', group.workspace.id)"
+        >
+          <Icon name="chat-new" />
+        </IconButton>
       </div>
 
       <Tooltip :text="group.workspace.root">
diff --git a/apps/kimi-web/src/components/chat/ApprovalCard.vue b/apps/kimi-web/src/components/chat/ApprovalCard.vue
index ee8d47003..0448ff261 100644
--- a/apps/kimi-web/src/components/chat/ApprovalCard.vue
+++ b/apps/kimi-web/src/components/chat/ApprovalCard.vue
@@ -191,17 +191,15 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
         </span>
         <Badge v-if="agentName && !minimized" variant="neutral" size="sm">{{ t('approval.subagentBadge', { name: agentName }) }}</Badge>
         <Badge v-if="!minimized" variant="warning" size="sm" class="aw">{{ t('approval.required') }}</Badge>
-        <Tooltip :text="minimized ? t('question.expand') : t('question.minimize')">
-          <IconButton
-            class="amin"
-            size="sm"
-            :label="minimized ? t('question.expand') : t('question.minimize')"
-            @click="minimized = !minimized"
-          >
-            <Icon v-if="minimized" name="chevron-down" size="md" />
-            <Icon v-else name="minus" size="md" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          class="amin"
+          size="sm"
+          :label="minimized ? t('question.expand') : t('question.minimize')"
+          @click="minimized = !minimized"
+        >
+          <Icon v-if="minimized" name="chevron-down" size="md" />
+          <Icon v-else name="minus" size="md" />
+        </IconButton>
       </div>
     </template>
 
diff --git a/apps/kimi-web/src/components/chat/ChatHeader.vue b/apps/kimi-web/src/components/chat/ChatHeader.vue
index 77b89cf5e..66b603bab 100644
--- a/apps/kimi-web/src/components/chat/ChatHeader.vue
+++ b/apps/kimi-web/src/components/chat/ChatHeader.vue
@@ -222,19 +222,17 @@ async function startArchive(): Promise<void> {
     </div>
 
     <!-- More menu trigger: copy-all + session actions -->
-    <Tooltip :text="t('header.options')">
-      <IconButton
-        ref="kebabRef"
-        class="ch-act-more"
-        :class="{ open: menuOpen }"
-        :label="t('header.options')"
-        :aria-expanded="menuOpen"
-        aria-haspopup="menu"
-        @click.stop="toggleMenu($event)"
-      >
-        <Icon name="dots-horizontal" size="md" />
-      </IconButton>
-    </Tooltip>
+    <IconButton
+      ref="kebabRef"
+      class="ch-act-more"
+      :class="{ open: menuOpen }"
+      :label="t('header.options')"
+      :aria-expanded="menuOpen"
+      aria-haspopup="menu"
+      @click.stop="toggleMenu($event)"
+    >
+      <Icon name="dots-horizontal" size="md" />
+    </IconButton>
 
     <!-- Fixed more menu -->
     <Menu
@@ -270,45 +268,39 @@ async function startArchive(): Promise<void> {
     <!-- Git branch + status — plain text with semantic colors. Renders for any
          git repo, even a detached HEAD (empty branch → "detached" label), so the
          diff counter below is never hidden just because there's no branch name. -->
-    <Tooltip :text="t('header.gitTooltip')">
-      <button
-        v-if="isGitRepo"
-        type="button"
-        class="ch-git"
-        @click="emit('openChanges')"
+    <button
+      v-if="isGitRepo"
+      type="button"
+      class="ch-git"
+      @click="emit('openChanges')"
+    >
+      <span
+        class="ch-branch"
+        :class="{ 'ch-detached': !branch }"
       >
-        <Tooltip :text="branch || t('header.detached')">
-          <span
-            class="ch-branch"
-            :class="{ 'ch-detached': !branch }"
-          >
-            {{ branch || t('header.detached') }}
-          </span>
-        </Tooltip>
-        <span v-if="ahead > 0 || behind > 0" class="ch-pill ch-sync-pill">
-          <span v-if="ahead > 0" class="ch-ahead">↑{{ ahead }}</span>
-          <span v-if="behind > 0" class="ch-behind">↓{{ behind }}</span>
-        </span>
-        <span v-if="hasLineStats" class="ch-pill ch-diff-pill">
-          <span v-if="adds > 0" class="ch-add">+{{ adds }}</span>
-          <span v-if="dels > 0" class="ch-del">-{{ dels }}</span>
-        </span>
-      </button>
-    </Tooltip>
+        {{ branch || t('header.detached') }}
+      </span>
+      <span v-if="ahead > 0 || behind > 0" class="ch-pill ch-sync-pill">
+        <span v-if="ahead > 0" class="ch-ahead">↑{{ ahead }}</span>
+        <span v-if="behind > 0" class="ch-behind">↓{{ behind }}</span>
+      </span>
+      <span v-if="hasLineStats" class="ch-pill ch-diff-pill">
+        <span v-if="adds > 0" class="ch-add">+{{ adds }}</span>
+        <span v-if="dels > 0" class="ch-del">-{{ dels }}</span>
+      </span>
+    </button>
 
     <!-- GitHub PR status -->
-    <Tooltip :text="t('header.openPr')">
-      <button
-        v-if="pr"
-        type="button"
-        class="ch-pill ch-pr"
-        :class="`pr-${pr.state}`"
-        @click="pr && emit('openPr', pr.url)"
-      >
-        <Icon name="git-pull-request" size="sm" />
-        <span>PR #{{ pr.number }} · {{ pr.state }}</span>
-      </button>
-    </Tooltip>
+    <button
+      v-if="pr"
+      type="button"
+      class="ch-pill ch-pr"
+      :class="`pr-${pr.state}`"
+      @click="pr && emit('openPr', pr.url)"
+    >
+      <Icon name="git-pull-request" size="sm" />
+      <span>PR #{{ pr.number }} · {{ pr.state }}</span>
+    </button>
 
   </header>
 </template>
diff --git a/apps/kimi-web/src/components/chat/ChatPane.vue b/apps/kimi-web/src/components/chat/ChatPane.vue
index 019bfa6dc..d61495293 100644
--- a/apps/kimi-web/src/components/chat/ChatPane.vue
+++ b/apps/kimi-web/src/components/chat/ChatPane.vue
@@ -575,31 +575,25 @@ function isStreamingRenderBlock(turn: ChatTurn, block: { sourceIndex: number }):
           </div>
           <div v-if="turn.createdAt || canEditTurn(turn)" class="u-meta">
             <div v-if="canEditTurn(turn)" class="u-edit-wrap" :class="{ undoing: undoingTurnId === turn.id }">
-              <Tooltip :text="t('conversation.undoTooltip')">
-                <button
-                  type="button"
-                  class="u-edit"
-                  :aria-label="t('conversation.undoTooltip')"
-                  @click="onUndo(turn)"
-                >
-                  <Icon name="undo" size="sm" />
-                </button>
-              </Tooltip>
-            </div>
-            <Tooltip
-              v-if="turn.text.trim().length > 0"
-              :text="t('filePreview.copy')"
-            >
               <button
                 type="button"
-                class="u-copy"
-                :aria-label="t('filePreview.copy')"
-                @click.stop="copyUserMessage(turn)"
+                class="u-edit"
+                :aria-label="t('conversation.undoTooltip')"
+                @click="onUndo(turn)"
               >
-                <Icon v-if="copiedTurn !== turn.id" name="copy" size="sm" />
-                <Icon v-else name="check" size="sm" />
+                <Icon name="undo" size="sm" />
               </button>
-            </Tooltip>
+            </div>
+            <button
+              v-if="turn.text.trim().length > 0"
+              type="button"
+              class="u-copy"
+              :aria-label="t('filePreview.copy')"
+              @click.stop="copyUserMessage(turn)"
+            >
+              <Icon v-if="copiedTurn !== turn.id" name="copy" size="sm" />
+              <Icon v-else name="check" size="sm" />
+            </button>
             <button
               v-if="turn.createdAt"
               type="button"
@@ -650,19 +644,15 @@ function isStreamingRenderBlock(turn: ChatTurn, block: { sourceIndex: number }):
           <Tooltip :text="`${turn.durationMs} ms`">
             <span v-if="turn.durationMs !== undefined" class="a-duration">{{ formatDuration(turn.durationMs) }}</span>
           </Tooltip>
-          <Tooltip
+          <button
             v-if="assistantRunFinalText(ti).trim().length > 0"
-            :text="t('filePreview.copy')"
+            class="a-cpbtn"
+            :aria-label="t('filePreview.copy')"
+            @click="copyAssistantRun(ti)"
           >
-            <button
-              class="a-cpbtn"
-              :aria-label="t('filePreview.copy')"
-              @click="copyAssistantRun(ti)"
-            >
-              <Icon v-if="copiedTurn !== turn.id" name="copy" size="sm" />
-              <Icon v-else name="check" size="sm" />
-            </button>
-          </Tooltip>
+            <Icon v-if="copiedTurn !== turn.id" name="copy" size="sm" />
+            <Icon v-else name="check" size="sm" />
+          </button>
         </div>
       </div>
     </template>
@@ -733,16 +723,14 @@ function isStreamingRenderBlock(turn: ChatTurn, block: { sourceIndex: number }):
           </div>
           <span v-if="qi === 0" class="q-tag q-tag-next">{{ t('composer.queueNext') }}</span>
           <span v-else class="q-tag q-tag-idx">#{{ qi + 1 }}</span>
-          <Tooltip :text="t('composer.remove')">
-            <button
-              type="button"
-              class="q-rm"
-              :aria-label="t('composer.remove')"
-              @click.stop="emit('unqueue', qi)"
-            >
-              <Icon name="close" size="sm" />
-            </button>
-          </Tooltip>
+          <button
+            type="button"
+            class="q-rm"
+            :aria-label="t('composer.remove')"
+            @click.stop="emit('unqueue', qi)"
+          >
+            <Icon name="close" size="sm" />
+          </button>
         </div>
       </div>
     </div>
diff --git a/apps/kimi-web/src/components/chat/Composer.vue b/apps/kimi-web/src/components/chat/Composer.vue
index f8a8feb7e..9d00f61b6 100644
--- a/apps/kimi-web/src/components/chat/Composer.vue
+++ b/apps/kimi-web/src/components/chat/Composer.vue
@@ -783,18 +783,16 @@ function selectModel(modelId: string): void {
             @compositionend="handleCompositionEnd"
             @input="handleInput"
           />
-          <Tooltip :text="expanded ? t('composer.collapseTitle') : t('composer.expandTitle')">
-            <button
-              v-if="expanded || isGrown"
-              class="expand-btn"
-              type="button"
-              :aria-label="expanded ? t('composer.collapseTitle') : t('composer.expandTitle')"
-              @click="toggleExpand"
-            >
-              <Icon v-if="expanded" name="collapse" size="sm" />
-              <Icon v-else name="expand" size="sm" />
-            </button>
-          </Tooltip>
+          <button
+            v-if="expanded || isGrown"
+            class="expand-btn"
+            type="button"
+            :aria-label="expanded ? t('composer.collapseTitle') : t('composer.expandTitle')"
+            @click="toggleExpand"
+          >
+            <Icon v-if="expanded" name="collapse" size="sm" />
+            <Icon v-else name="expand" size="sm" />
+          </button>
         </div>
       </div>
 
@@ -813,30 +811,26 @@ function selectModel(modelId: string): void {
       <div ref="toolbarRef" class="toolbar">
         <!-- Left: attach + permission + plan -->
         <div class="toolbar-left">
-          <Tooltip :text="t('composer.attachImage')">
-            <IconButton
-              v-if="hasUpload"
-              size="md"
-              :label="t('composer.attachImage')"
-              @click="openFilePicker"
-            >
-              <Icon name="image" />
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            v-if="hasUpload"
+            size="md"
+            :label="t('composer.attachImage')"
+            @click="openFilePicker"
+          >
+            <Icon name="image" />
+          </IconButton>
 
           <!-- Permission pill — click to open dropdown -->
-          <Tooltip :text="t('status.permissionTooltip')">
-            <span
-              v-if="status"
-              class="perm-pill"
-              :class="['perm-' + status.permission, { open: permDropdownOpen }]"
-              role="button"
-              tabindex="0"
-              @click.stop="togglePermDropdown"
-              @keydown.enter="togglePermDropdown"
-              @keydown.space.prevent="togglePermDropdown"
-            >{{ permLabel }}</span>
-          </Tooltip>
+          <span
+            v-if="status"
+            class="perm-pill"
+            :class="['perm-' + status.permission, { open: permDropdownOpen }]"
+            role="button"
+            tabindex="0"
+            @click.stop="togglePermDropdown"
+            @keydown.enter="togglePermDropdown"
+            @keydown.space.prevent="togglePermDropdown"
+          >{{ permLabel }}</span>
 
           <!-- Permission dropdown — anchored to the toolbar left side -->
           <div v-if="permDropdownOpen && status" class="perm-dropdown" role="menu" @click.stop>
@@ -858,19 +852,17 @@ function selectModel(modelId: string): void {
 
           <!-- Modes selector (plan / goal / swarm) — replaces the plan pill. -->
           <div v-if="status" ref="modesRef" class="modes">
-            <Tooltip :text="t('status.modesTooltip')">
-              <button
-                type="button"
-                class="mode-pill"
-                :class="{ on: anyModeActive, open: modesOpen }"
-                @click.stop="toggleModes"
-              >
-                <span class="mode-label">{{ t('status.modesLabel') }}</span>
-                <span v-if="planOn" class="mode-tag">{{ t('status.planLabel') }}</span>
-                <span v-if="swarmOn" class="mode-tag">{{ t('status.swarmLabel') }}</span>
-                <span v-if="goalArmed" class="mode-tag">{{ t('status.goalLabel') }}</span>
-              </button>
-            </Tooltip>
+            <button
+              type="button"
+              class="mode-pill"
+              :class="{ on: anyModeActive, open: modesOpen }"
+              @click.stop="toggleModes"
+            >
+              <span class="mode-label">{{ t('status.modesLabel') }}</span>
+              <span v-if="planOn" class="mode-tag">{{ t('status.planLabel') }}</span>
+              <span v-if="swarmOn" class="mode-tag">{{ t('status.swarmLabel') }}</span>
+              <span v-if="goalArmed" class="mode-tag">{{ t('status.goalLabel') }}</span>
+            </button>
 
             <div v-if="modesOpen" ref="modesMenuRef" class="modes-menu" :style="modesMenuStyle">
               <!-- Plan — functional client toggle -->
@@ -925,22 +917,20 @@ function selectModel(modelId: string): void {
           </Tooltip>
 
           <!-- Model pill — click to open quick-switch dropdown -->
-          <Tooltip :text="t('status.modelTooltip')">
-            <span
-              v-if="status"
-              class="model-pill"
-              :class="{ open: dropdownOpen }"
-              role="button"
-              tabindex="0"
-              @click.stop="toggleDropdown"
-              @keydown.enter="toggleDropdown"
-              @keydown.space.prevent="toggleDropdown"
-            >
-              <b>{{ status.model }}</b>
-              <span v-if="thinkingOn" class="think-suffix">{{ t('composer.thinkingSuffix') }}</span>
-              <Icon class="cv" name="chevron-down" size="sm" />
-            </span>
-          </Tooltip>
+          <span
+            v-if="status"
+            class="model-pill"
+            :class="{ open: dropdownOpen }"
+            role="button"
+            tabindex="0"
+            @click.stop="toggleDropdown"
+            @keydown.enter="toggleDropdown"
+            @keydown.space.prevent="toggleDropdown"
+          >
+            <b>{{ status.model }}</b>
+            <span v-if="thinkingOn" class="think-suffix">{{ t('composer.thinkingSuffix') }}</span>
+            <Icon class="cv" name="chevron-down" size="sm" />
+          </span>
           <Tooltip v-if="running" :text="t('composer.interruptTitle')">
             <button
               class="stop"
@@ -950,15 +940,13 @@ function selectModel(modelId: string): void {
               <Icon name="stop" size="sm" />
             </button>
           </Tooltip>
-          <Tooltip :text="sendLabel">
-            <button
-              class="send"
-              :aria-label="sendLabel"
-              @click="handleSubmit()"
-            >
-              <Icon name="send" size="sm" />
-            </button>
-          </Tooltip>
+          <button
+            class="send"
+            :aria-label="sendLabel"
+            @click="handleSubmit()"
+          >
+            <Icon name="send" size="sm" />
+          </button>
         </div>
 
         <!-- Model dropdown — current provider models + controls + more -->
diff --git a/apps/kimi-web/src/components/chat/DiffView.vue b/apps/kimi-web/src/components/chat/DiffView.vue
index 0a00d9d13..11d35cac7 100644
--- a/apps/kimi-web/src/components/chat/DiffView.vue
+++ b/apps/kimi-web/src/components/chat/DiffView.vue
@@ -220,12 +220,10 @@ function treePadding(depth: number): string {
       </PanelHeader>
 
       <div class="diff-head">
-        <Tooltip :text="t('diff.back')">
-          <Button v-if="!hideBack" variant="ghost" size="sm" @click="onBack">
-            <span aria-hidden="true">&#8592;</span>
-            <span class="back-label">{{ t('diff.back') }}</span>
-          </Button>
-        </Tooltip>
+        <Button v-if="!hideBack" variant="ghost" size="sm" @click="onBack">
+          <span aria-hidden="true">&#8592;</span>
+          <span class="back-label">{{ t('diff.back') }}</span>
+        </Button>
       </div>
 
       <div v-if="loading" class="empty-state">{{ t('diff.loading') }}</div>
diff --git a/apps/kimi-web/src/components/chat/OpenInMenu.vue b/apps/kimi-web/src/components/chat/OpenInMenu.vue
index 8af56bcbf..f19f1280b 100644
--- a/apps/kimi-web/src/components/chat/OpenInMenu.vue
+++ b/apps/kimi-web/src/components/chat/OpenInMenu.vue
@@ -198,18 +198,16 @@ async function copyPath(): Promise<void> {
       </Button>
     </Tooltip>
 
-    <Tooltip :text="t('header.chooseOpenApp')">
-      <IconButton
-        ref="triggerRef"
-        size="sm"
-        :class="{ open: menuOpen }"
-        :disabled="!hasWorkDir"
-        :label="t('header.chooseOpenApp')"
-        @click.stop="openMenu"
-      >
-        <Icon name="chevron-down" size="sm" />
-      </IconButton>
-    </Tooltip>
+    <IconButton
+      ref="triggerRef"
+      size="sm"
+      :class="{ open: menuOpen }"
+      :disabled="!hasWorkDir"
+      :label="t('header.chooseOpenApp')"
+      @click.stop="openMenu"
+    >
+      <Icon name="chevron-down" size="sm" />
+    </IconButton>
 
     <Menu
       v-if="menuOpen"
diff --git a/apps/kimi-web/src/components/chat/QuestionCard.vue b/apps/kimi-web/src/components/chat/QuestionCard.vue
index fcd8a68d0..eff842d6e 100644
--- a/apps/kimi-web/src/components/chat/QuestionCard.vue
+++ b/apps/kimi-web/src/components/chat/QuestionCard.vue
@@ -10,7 +10,6 @@ import Badge from '../ui/Badge.vue';
 import Button from '../ui/Button.vue';
 import IconButton from '../ui/IconButton.vue';
 import Icon from '../ui/Icon.vue';
-import Tooltip from '../ui/Tooltip.vue';
 
 const props = defineProps<{
   question: UIQuestion;
@@ -278,17 +277,15 @@ onUnmounted(() => document.removeEventListener('keydown', handleKeydown));
         <span v-if="total > 1 && !minimized" class="qstep">{{ t('question.step', { current: step + 1, total }) }}</span>
         <!-- When minimized, surface the question text so the bar stays identifiable -->
         <span v-if="minimized" class="qmin-peek">{{ current.question }}</span>
-        <Tooltip :text="minimized ? t('question.expand') : t('question.minimize')">
-          <IconButton
-            class="qmin"
-            size="sm"
-            :label="minimized ? t('question.expand') : t('question.minimize')"
-            @click="minimized = !minimized"
-          >
-            <Icon v-if="minimized" name="chevron-down" size="md" />
-            <Icon v-else name="minus" size="md" />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          class="qmin"
+          size="sm"
+          :label="minimized ? t('question.expand') : t('question.minimize')"
+          @click="minimized = !minimized"
+        >
+          <Icon v-if="minimized" name="chevron-down" size="md" />
+          <Icon v-else name="minus" size="md" />
+        </IconButton>
       </div>
     </template>
 
diff --git a/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue b/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue
index 56058794e..8dcd40cb3 100644
--- a/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue
+++ b/apps/kimi-web/src/components/mobile/MobileSwitcherSheet.vue
@@ -198,27 +198,23 @@ async function onDeleteWorkspace(ws: WorkspaceView): Promise<void> {
             class="att"
           >{{ wsAttention(g.workspace.id) }}</span>
 
-          <Tooltip :text="t('sidebar.options')">
-            <IconButton
-              size="lg"
-              class="mgh-more"
-              :label="t('sidebar.options')"
-              @click.stop="toggleWsMenu(g.workspace.id)"
-            >
-              <Icon name="dots-horizontal" size="md" />
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            size="lg"
+            class="mgh-more"
+            :label="t('sidebar.options')"
+            @click.stop="toggleWsMenu(g.workspace.id)"
+          >
+            <Icon name="dots-horizontal" size="md" />
+          </IconButton>
 
-          <Tooltip :text="t('workspace.newInGroup')">
-            <IconButton
-              size="lg"
-              class="mgh-add"
-              :label="t('workspace.newInGroup')"
-              @click.stop="onCreateInWorkspace(g.workspace.id)"
-            >
-              <Icon name="plus" size="md" />
-            </IconButton>
-          </Tooltip>
+          <IconButton
+            size="lg"
+            class="mgh-add"
+            :label="t('workspace.newInGroup')"
+            @click.stop="onCreateInWorkspace(g.workspace.id)"
+          >
+            <Icon name="plus" size="md" />
+          </IconButton>
 
           <!-- Workspace menu: copy path / delete (two-step confirm) -->
           <Menu v-if="wsMenuFor === g.workspace.id" class="kmenu wsmenu" @click.stop>
@@ -243,16 +239,14 @@ async function onDeleteWorkspace(ws: WorkspaceView): Promise<void> {
               <div class="s">{{ s.time }}</div>
             </div>
             <span v-if="(attentionBySession[s.id] ?? 0) > 0" class="att">{{ attentionBySession[s.id] }}</span>
-            <Tooltip :text="t('sidebar.options')">
-              <IconButton
-                size="lg"
-                class="kb"
-                :label="t('sidebar.options')"
-                @click.stop="toggleMenu(s.id)"
-              >
-                <Icon name="dots-horizontal" size="md" />
-              </IconButton>
-            </Tooltip>
+            <IconButton
+              size="lg"
+              class="kb"
+              :label="t('sidebar.options')"
+              @click.stop="toggleMenu(s.id)"
+            >
+              <Icon name="dots-horizontal" size="md" />
+            </IconButton>
 
             <!-- Kebab menu -->
             <Menu v-if="menuFor === s.id" class="kmenu" @click.stop>
diff --git a/apps/kimi-web/src/components/ui/PanelHeader.vue b/apps/kimi-web/src/components/ui/PanelHeader.vue
index fbd276b9b..930ba5179 100644
--- a/apps/kimi-web/src/components/ui/PanelHeader.vue
+++ b/apps/kimi-web/src/components/ui/PanelHeader.vue
@@ -30,17 +30,15 @@ defineEmits<{ close: [] }>();
       <span v-if="subtitle" class="ui-panel-header__sub">{{ subtitle }}</span>
     </Tooltip>
     <slot />
-    <Tooltip :text="closeLabel">
-      <IconButton
-        v-if="closable"
-        class="ui-panel-header__close"
-        size="sm"
-        :label="closeLabel"
-        @click="$emit('close')"
-      >
-        <Icon name="close" size="sm" />
-      </IconButton>
-    </Tooltip>
+    <IconButton
+      v-if="closable"
+      class="ui-panel-header__close"
+      size="sm"
+      :label="closeLabel"
+      @click="$emit('close')"
+    >
+      <Icon name="close" size="sm" />
+    </IconButton>
   </div>
 </template>
 
diff --git a/apps/kimi-web/src/components/ui/Tooltip.vue b/apps/kimi-web/src/components/ui/Tooltip.vue
index 8d097e44d..a120cbff3 100644
--- a/apps/kimi-web/src/components/ui/Tooltip.vue
+++ b/apps/kimi-web/src/components/ui/Tooltip.vue
@@ -2,11 +2,12 @@
 <!-- Design-system §03 Tooltip: hover/focus hint. Wrap the trigger in the default
      slot; text via prop. The wrapper is `display: contents` so it never alters the
      trigger's layout (safe for truncated/flex triggers); listeners are attached to
-     the real trigger element, which also anchors the bubble. The bubble is rendered
-     through a body teleport so it escapes ancestor overflow clipping, and positioned
-     with flip + viewport clamping. Short text stays on one line; long text wraps
-     within `maxWidth` and is clamped to `maxLines` lines with an ellipsis so the
-     bubble never grows too tall. -->
+     the real trigger element, which also anchors the bubble, and re-attached if that
+     element is removed or replaced (so an open tooltip can never strand on screen).
+     The bubble is rendered through a body teleport so it escapes ancestor overflow
+     clipping, and positioned with flip + viewport clamping. Short text stays on one
+     line; long text wraps within `maxWidth` and is clamped to `maxLines` lines with
+     an ellipsis so the bubble never grows too tall. -->
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue';
 
@@ -39,6 +40,7 @@ const bubbleStyle = ref<Record<string, string>>({ maxWidth: `${props.maxWidth}px
 
 let showTimer: ReturnType<typeof setTimeout> | undefined;
 let target: HTMLElement | null = null;
+let observer: MutationObserver | undefined;
 
 function position(): void {
   const bub = bubble.value;
@@ -104,25 +106,47 @@ function onScrollOrResize(): void {
   if (open.value) hide();
 }
 
-onMounted(() => {
-  target = (trigger.value?.firstElementChild as HTMLElement | null) ?? trigger.value ?? null;
-  if (!target) return;
-  target.addEventListener('mouseenter', show);
-  target.addEventListener('mouseleave', hide);
-  target.addEventListener('focusin', show);
-  target.addEventListener('focusout', hide);
-  window.addEventListener('scroll', onScrollOrResize, true);
-  window.addEventListener('resize', onScrollOrResize);
-});
-
-onBeforeUnmount(() => {
-  window.clearTimeout(showTimer);
+function setTarget(el: HTMLElement | null): void {
+  if (el === target) return;
   if (target) {
     target.removeEventListener('mouseenter', show);
     target.removeEventListener('mouseleave', hide);
     target.removeEventListener('focusin', show);
     target.removeEventListener('focusout', hide);
   }
+  target = el;
+  if (target) {
+    target.addEventListener('mouseenter', show);
+    target.addEventListener('mouseleave', hide);
+    target.addEventListener('focusin', show);
+    target.addEventListener('focusout', hide);
+  }
+}
+
+onMounted(() => {
+  const root = trigger.value ?? null;
+  setTarget((root?.firstElementChild as HTMLElement | null) ?? root);
+  // Keep `target` in sync with the live slotted element: if it's removed or
+  // replaced while the tooltip is open (e.g. a v-if toggles on hover), the
+  // mouseleave we rely on never fires and the bubble would get stuck on screen.
+  if (root) {
+    observer = new MutationObserver(() => {
+      const next = (root.firstElementChild as HTMLElement | null) ?? null;
+      if (next !== target) {
+        hide();
+        setTarget(next ?? root);
+      }
+    });
+    observer.observe(root, { childList: true });
+  }
+  window.addEventListener('scroll', onScrollOrResize, true);
+  window.addEventListener('resize', onScrollOrResize);
+});
+
+onBeforeUnmount(() => {
+  window.clearTimeout(showTimer);
+  observer?.disconnect();
+  setTarget(null);
   window.removeEventListener('scroll', onScrollOrResize, true);
   window.removeEventListener('resize', onScrollOrResize);
 });
diff --git a/apps/kimi-web/src/i18n/locales/en/status.ts b/apps/kimi-web/src/i18n/locales/en/status.ts
index ae5f521c3..fc4ca8cc4 100644
--- a/apps/kimi-web/src/i18n/locales/en/status.ts
+++ b/apps/kimi-web/src/i18n/locales/en/status.ts
@@ -4,11 +4,9 @@ export default {
   connectionDisconnected: 'Disconnected',
   ctxTooltip: 'Used {used} / {max} tokens ({pct}%)',
   modelLabel: 'Model',
-  modelTooltip: 'Click to switch model',
   permissionManual: 'Manual',
   permissionAuto: 'Auto',
   permissionYolo: 'YOLO',
-  permissionTooltip: 'Click to cycle permission mode',
   permissionManualDesc: 'Ask for approval on every tool action',
   permissionAutoDesc: 'Fully autonomous — agent decides everything without asking',
   permissionYoloDesc: 'Auto-approve tool actions, but agent may still ask questions',
@@ -19,7 +17,6 @@ export default {
   planTooltip: 'Toggle plan mode (research before editing)',
   // Mode selector (Plan / Goal / Swarm)
   modesLabel: 'Mode',
-  modesTooltip: 'Mode: Plan / Goal / Swarm',
   goalLabel: 'Goal',
   swarmLabel: 'Swarm',
   modeOff: 'Off',
diff --git a/apps/kimi-web/src/i18n/locales/zh/status.ts b/apps/kimi-web/src/i18n/locales/zh/status.ts
index 2eb8dcc4a..98287e9d5 100644
--- a/apps/kimi-web/src/i18n/locales/zh/status.ts
+++ b/apps/kimi-web/src/i18n/locales/zh/status.ts
@@ -4,11 +4,9 @@ export default {
   connectionDisconnected: '未连接',
   ctxTooltip: '使用 {used} / {max} tokens ({pct}%)',
   modelLabel: '模型',
-  modelTooltip: '点击切换模型',
   permissionManual: '逐条确认',
   permissionAuto: '完全自主',
   permissionYolo: '自动通过',
-  permissionTooltip: '点击循环切换审批模式',
   permissionManualDesc: '每个工具操作都需要你手动确认',
   permissionAutoDesc: '完全自主运行，agent 自己做决定，不再询问',
   permissionYoloDesc: '自动批准工具操作，但遇到关键问题仍会询问',
@@ -19,7 +17,6 @@ export default {
   planTooltip: '切换计划模式（先调研再修改）',
   // 模式选择器（计划 / 目标 / Swarm）
   modesLabel: '模式',
-  modesTooltip: '模式：计划 / 目标 / Swarm',
   goalLabel: '目标',
   swarmLabel: 'Swarm',
   modeOff: '未启用',