From a660c0fa4ad5ccc5f8dfa243735932828f637601 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Sun, 24 Sep 2023 20:35:07 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=BF=E6=8D=A2Tooltip?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/plugins/directive/tooltip.ts              |   2 +-
 src/views/Editor/CanvasTool/index.vue         |  73 ++---
 src/views/Editor/EditorHeader/index.vue       |  17 +-
 src/views/Editor/ExportDialog/ExportImage.vue |   5 +-
 src/views/Editor/ExportDialog/ExportPPTX.vue  |   5 +-
 .../Editor/Toolbar/ElementAnimationPanel.vue  |   9 +-
 .../Editor/Toolbar/ElementPositionPanel.vue   |  33 +--
 .../ChartStylePanel/index.vue                 |   5 +-
 .../ElementStylePanel/MultiStylePanel.vue     |  55 ++--
 .../ElementStylePanel/ShapeStylePanel.vue     | 143 ++++------
 .../ElementStylePanel/TableStylePanel.vue     |  81 +++---
 .../ElementStylePanel/TextStylePanel.vue      | 254 ++++++++----------
 .../Editor/Toolbar/MultiPositionPanel.vue     |  25 +-
 src/views/Screen/BaseView.vue                 |  27 +-
 src/views/Screen/WritingBoardTool.vue         |  37 ++-
 15 files changed, 298 insertions(+), 473 deletions(-)

diff --git a/src/plugins/directive/tooltip.ts b/src/plugins/directive/tooltip.ts
index 74ae6488..40d6b0ea 100644
--- a/src/plugins/directive/tooltip.ts
+++ b/src/plugins/directive/tooltip.ts
@@ -20,7 +20,7 @@ interface BindingValue {
 const TooltipDirective: Directive = {
   mounted(el: CustomHTMLElement, binding: DirectiveBinding<BindingValue | string>) {
     let content = ''
-    let placement: Placement = 'auto'
+    let placement: Placement = 'top'
     let delay: Delay = [300, 0]
 
     if (typeof binding.value === 'string') {
diff --git a/src/views/Editor/CanvasTool/index.vue b/src/views/Editor/CanvasTool/index.vue
index b0a60815..7e50e39d 100644
--- a/src/views/Editor/CanvasTool/index.vue
+++ b/src/views/Editor/CanvasTool/index.vue
@@ -1,63 +1,45 @@
 <template>
   <div class="canvas-tool">
     <div class="left-handler">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="撤销">
-        <IconBack class="handler-item" :class="{ 'disable': !canUndo }" @click="undo()" />
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="重做">
-        <IconNext class="handler-item" :class="{ 'disable': !canRedo }" @click="redo()" />
-      </Tooltip>
+      <IconBack class="handler-item" :class="{ 'disable': !canUndo }" v-tooltip="'撤销'" @click="undo()" />
+      <IconNext class="handler-item" :class="{ 'disable': !canRedo }" v-tooltip="'重做'" @click="redo()" />
       <Divider type="vertical" style="height: 20px;" />
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="选择窗格" @click="openSelectPanel()">
-        <IconMoveOne class="handler-item" />
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="查找/替换" @click="openSraechPanel()">
-        <IconSearch class="handler-item" />
-      </Tooltip>
+      <IconMoveOne class="handler-item" v-tooltip="'选择窗格'" @click="openSelectPanel()" />
+      <IconSearch class="handler-item" v-tooltip="'查找/替换'" @click="openSraechPanel()" />
     </div>
 
     <div class="add-element-handler">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入文字" :align="{ offset: [0, 0] }">
-        <div class="handler-item group-btn">
-          <IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
-          
-          <Popover trigger="click" v-model:open="textTypeSelectVisible">
-            <template #content>
-              <div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div>
-              <div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div>
-            </template>
-            <IconDown class="arrow" />
-          </Popover>
-        </div>
-      </Tooltip>
+      <div class="handler-item group-btn" v-tooltip="'插入文字'">
+        <IconFontSize class="icon" :class="{ 'active': creatingElement?.type === 'text' }" @click="drawText()" />
+        
+        <Popover trigger="click" v-model:open="textTypeSelectVisible">
+          <template #content>
+            <div class="text-type-item" @click="() => { drawText(); textTypeSelectVisible = false }"><IconTextRotationNone /> 横向文本框</div>
+            <div class="text-type-item" @click="() => { drawText(true); textTypeSelectVisible = false }"><IconTextRotationDown /> 竖向文本框</div>
+          </template>
+          <IconDown class="arrow" />
+        </Popover>
+      </div>
       <FileInput @change="files => insertImageElement(files)">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图片" :align="{ offset: [0, 0] }">
-          <IconPicture class="handler-item" />
-        </Tooltip>
+        <IconPicture class="handler-item" v-tooltip="'插入图片'" />
       </FileInput>
       <Popover trigger="click" v-model:open="shapePoolVisible">
         <template #content>
           <ShapePool @select="shape => drawShape(shape)" />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入形状" :align="{ offset: [0, 0] }">
-          <IconGraphicDesign class="handler-item" :class="{ 'active': creatingCustomShape || creatingElement?.type === 'shape' }" />
-        </Tooltip>
+        <IconGraphicDesign class="handler-item" :class="{ 'active': creatingCustomShape || creatingElement?.type === 'shape' }" v-tooltip="'插入形状'" />
       </Popover>
       <Popover trigger="click" v-model:open="linePoolVisible">
         <template #content>
           <LinePool @select="line => drawLine(line)" />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入线条" :align="{ offset: [0, 0] }">
-          <IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" />
-        </Tooltip>
+        <IconConnection class="handler-item" :class="{ 'active': creatingElement?.type === 'line' }" v-tooltip="'插入线条'" />
       </Popover>
       <Popover trigger="click" v-model:open="chartPoolVisible">
         <template #content>
           <ChartPool @select="chart => { createChartElement(chart); chartPoolVisible = false }" />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入图表" :align="{ offset: [0, 0] }">
-          <IconChartProportion class="handler-item" />
-        </Tooltip>
+        <IconChartProportion class="handler-item" v-tooltip="'插入图表'" />
       </Popover>
       <Popover trigger="click" v-model:open="tableGeneratorVisible">
         <template #content>
@@ -66,13 +48,9 @@
             @insert="({ row, col }) => { createTableElement(row, col); tableGeneratorVisible = false }"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入表格" :align="{ offset: [0, 0] }">
-          <IconInsertTable class="handler-item" />
-        </Tooltip>
+        <IconInsertTable class="handler-item" v-tooltip="'插入表格'" />
       </Popover>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入公式" :align="{ offset: [0, 0] }">
-        <IconFormula class="handler-item" @click="latexEditorVisible = true" />
-      </Tooltip>
+      <IconFormula class="handler-item" v-tooltip="'插入公式'" @click="latexEditorVisible = true" />
       <Popover trigger="click" v-model:open="mediaInputVisible">
         <template #content>
           <MediaInput 
@@ -81,9 +59,7 @@
             @insertAudio="src => { createAudioElement(src); mediaInputVisible = false }"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="插入音视频" :align="{ offset: [0, 0] }">
-          <IconVideoTwo class="handler-item" />
-        </Tooltip>
+        <IconVideoTwo class="handler-item" v-tooltip="'插入音视频'" />
       </Popover>
     </div>
 
@@ -103,9 +79,7 @@
         <span class="text">{{canvasScalePercentage}}</span>
       </Popover>
       <IconPlus class="handler-item viewport-size" @click="scaleCanvas('+')" />
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="适应屏幕">
-        <IconFullScreen class="handler-item viewport-size-adaptation" @click="resetCanvas()" />
-      </Tooltip>
+      <IconFullScreen class="handler-item viewport-size-adaptation" v-tooltip="'适应屏幕'" @click="resetCanvas()" />
     </div>
 
     <Modal
@@ -140,7 +114,6 @@ import LaTeXEditor from '@/components/LaTeXEditor/index.vue'
 import FileInput from '@/components/FileInput.vue'
 import Modal from '@/components/Modal.vue'
 import {
-  Tooltip,
   Popover,
   Divider,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 6d5a0835..1af58810 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -39,11 +39,9 @@
 
     <div class="right">
       <div class="group-menu-item">
-        <Tooltip :mouseLeaveDelay="0" title="幻灯片放映">
-          <div class="menu-item" @click="enterScreening()">
-            <IconPpt class="icon" />
-          </div>
-        </Tooltip>
+        <div class="menu-item" v-tooltip="'幻灯片放映'" @click="enterScreening()">
+          <IconPpt class="icon" />
+        </div>
         <Popover trigger="click">
           <template #content>
             <div class="popover-list">
@@ -54,11 +52,9 @@
           <div class="arrow-btn"><IconDown class="arrow" /></div>
         </Popover>
       </div>
-      <Tooltip :mouseLeaveDelay="0" title="导出">
-        <div class="menu-item" @click="setDialogForExport('pptx')">
-          <IconDownload class="icon" />
-        </div>
-      </Tooltip>
+      <div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')">
+        <IconDownload class="icon" />
+      </div>
       <a class="github-link" href="https://github.com/pipipi-pikachu/PPTist" target="_blank">
         <div class="menu-item"><IconGithub class="icon" /></div>
       </a>
@@ -90,7 +86,6 @@ import FileInput from '@/components/FileInput.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import Drawer from '@/components/Drawer.vue'
 import {
-  Tooltip,
   Popover,
   Input,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/ExportDialog/ExportImage.vue b/src/views/Editor/ExportDialog/ExportImage.vue
index 31c3414d..36c1210d 100644
--- a/src/views/Editor/ExportDialog/ExportImage.vue
+++ b/src/views/Editor/ExportDialog/ExportImage.vue
@@ -59,9 +59,7 @@
       <div class="row">
         <div class="title">忽略在线字体：</div>
         <div class="config-item">
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.1" title="导出时默认忽略在线字体，若您在幻灯片中使用了在线字体，且希望导出后保留相关样式，可选择关闭【忽略在线字体】选项，但要注意这将会增加导出用时。">
-            <Switch v-model:checked="ignoreWebfont" />
-          </Tooltip>
+          <Switch v-model:checked="ignoreWebfont" v-tooltip="'导出时默认忽略在线字体，若您在幻灯片中使用了在线字体，且希望导出后保留相关样式，可选择关闭【忽略在线字体】选项，但要注意这将会增加导出用时。'" />
         </div>
       </div>
     </div>
@@ -85,7 +83,6 @@ import ThumbnailSlide from '@/views/components/ThumbnailSlide/index.vue'
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import {
   Button,
-  Tooltip,
   Slider,
   Switch,
   Radio,
diff --git a/src/views/Editor/ExportDialog/ExportPPTX.vue b/src/views/Editor/ExportDialog/ExportPPTX.vue
index aad7590a..b3f697f3 100644
--- a/src/views/Editor/ExportDialog/ExportPPTX.vue
+++ b/src/views/Editor/ExportDialog/ExportPPTX.vue
@@ -26,9 +26,7 @@
       <div class="row">
         <div class="title">忽略音频/视频：</div>
         <div class="config-item">
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.1" title="导出时默认忽略音视频，若您的幻灯片中存在音视频元素，且希望将其导出到PPTX文件中，可选择关闭【忽略音视频】选项，但要注意这将会大幅增加导出用时。">
-            <Switch v-model:checked="ignoreMedia" />
-          </Tooltip>
+          <Switch v-model:checked="ignoreMedia" v-tooltip="'导出时默认忽略音视频，若您的幻灯片中存在音视频元素，且希望将其导出到PPTX文件中，可选择关闭【忽略音视频】选项，但要注意这将会大幅增加导出用时。'" />
         </div>
       </div>
       <div class="row">
@@ -62,7 +60,6 @@ import useExport from '@/hooks/useExport'
 
 import FullscreenSpin from '@/components/FullscreenSpin.vue'
 import {
-  Tooltip,
   Button,
   Slider,
   Switch,
diff --git a/src/views/Editor/Toolbar/ElementAnimationPanel.vue b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
index 0fcd7a3a..86b079d1 100644
--- a/src/views/Editor/Toolbar/ElementAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/ElementAnimationPanel.vue
@@ -67,12 +67,8 @@
             <div class="index">{{element.index}}</div>
             <div class="text">【{{element.elType}}】{{element.animationEffect}}</div>
             <div class="handler">
-              <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="预览">
-                <IconPlayOne class="handler-btn" @click="runAnimation(element.elId, element.effect, element.duration)" />
-              </Tooltip>
-              <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
-                <IconCloseSmall class="handler-btn" @click="deleteAnimation(element.id)" />
-              </Tooltip>
+              <IconPlayOne class="handler-btn" v-tooltip="'预览'" @click="runAnimation(element.elId, element.effect, element.duration)" />
+              <IconCloseSmall class="handler-btn" v-tooltip="'删除'" @click="deleteAnimation(element.id)" />
             </div>
           </div>
 
@@ -135,7 +131,6 @@ import {
   InputNumber,
   Divider,
   Button,
-  Tooltip,
   Popover,
   Select,
 } from 'ant-design-vue'
diff --git a/src/views/Editor/Toolbar/ElementPositionPanel.vue b/src/views/Editor/Toolbar/ElementPositionPanel.vue
index 9e760b2a..c1ce2f09 100644
--- a/src/views/Editor/Toolbar/ElementPositionPanel.vue
+++ b/src/views/Editor/Toolbar/ElementPositionPanel.vue
@@ -14,26 +14,14 @@
     
     <div class="title">对齐：</div>
     <ButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.LEFT)"><IconAlignLeft /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
-        <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.HORIZONTAL)"><IconAlignVertically /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.RIGHT)"><IconAlignRight /></Button>
-      </Tooltip>
+      <Button style="flex: 1;" v-tooltip="'左对齐'" @click="alignElementToCanvas(ElementAlignCommands.LEFT)"><IconAlignLeft /></Button>
+      <Button style="flex: 1;" v-tooltip="'水平居中'" @click="alignElementToCanvas(ElementAlignCommands.HORIZONTAL)"><IconAlignVertically /></Button>
+      <Button style="flex: 1;" v-tooltip="'右对齐'" @click="alignElementToCanvas(ElementAlignCommands.RIGHT)"><IconAlignRight /></Button>
     </ButtonGroup>
     <ButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.TOP)"><IconAlignTop /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
-        <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.VERTICAL)"><IconAlignHorizontally /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
-        <Button style="flex: 1;" @click="alignElementToCanvas(ElementAlignCommands.BOTTOM)"><IconAlignBottom /></Button>
-      </Tooltip>
+      <Button style="flex: 1;" v-tooltip="'上对齐'" @click="alignElementToCanvas(ElementAlignCommands.TOP)"><IconAlignTop /></Button>
+      <Button style="flex: 1;" v-tooltip="'垂直居中'" @click="alignElementToCanvas(ElementAlignCommands.VERTICAL)"><IconAlignHorizontally /></Button>
+      <Button style="flex: 1;" v-tooltip="'下对齐'" @click="alignElementToCanvas(ElementAlignCommands.BOTTOM)"><IconAlignBottom /></Button>
     </ButtonGroup>
 
     <Divider />
@@ -69,12 +57,8 @@
           style="flex: 4;"
         />
         <template v-if="['image', 'shape', 'audio'].includes(handleElement!.type)">
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="解除宽高比锁定" v-if="fixedRatio">
-            <IconLock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(false)" />
-          </Tooltip>
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="宽高比锁定" v-else>
-            <IconUnlock style="flex: 1;" class="icon-btn" @click="updateFixedRatio(true)" />
-          </Tooltip>
+          <IconLock style="flex: 1;" class="icon-btn" v-tooltip="'解除宽高比锁定'" @click="updateFixedRatio(false)" v-if="fixedRatio" />
+          <IconUnlock style="flex: 1;" class="icon-btn" v-tooltip="'宽高比锁定'" @click="updateFixedRatio(true)" v-else />
         </template>
         <div style="flex: 1;" v-else></div>
         <InputNumber 
@@ -127,7 +111,6 @@ import {
   InputNumber,
   Divider,
   Button,
-  Tooltip,
 } from 'ant-design-vue'
 const ButtonGroup = Button.Group
 
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
index 472bca66..31eb04c9 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/index.vue
@@ -94,9 +94,7 @@
         </template>
         <div class="color-btn-wrap" style="flex: 3;">
           <ColorButton :color="color" style="width: 100%;" />
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除">
-            <div class="delete-color-btn" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div>
-          </Tooltip>
+          <div class="delete-color-btn" v-tooltip="'删除'" @click.stop="deleteThemeColor(index)" v-if="index !== 0"><IconCloseSmall /></div>
         </div>
       </Popover>
     </div>
@@ -163,7 +161,6 @@ import Modal from '@/components/Modal.vue'
 import {
   Divider,
   Button,
-  Tooltip,
   Popover,
   Select,
   Checkbox,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
index 89fb17f3..9724eaba 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/MultiStylePanel.vue
@@ -86,11 +86,9 @@
             @update:modelValue="value => updateFontStyle('color', value)"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-          <TextColorButton :color="richTextAttrs.color" style="flex: 3;">
-            <IconText />
-          </TextColorButton>
-        </Tooltip>
+        <TextColorButton :color="richTextAttrs.color" style="flex: 3;" v-tooltip="'文字颜色'">
+          <IconText />
+        </TextColorButton>
       </Popover>
       <Popover trigger="click">
         <template #content>
@@ -99,26 +97,22 @@
             @update:modelValue="value => updateFontStyle('backcolor', value)"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
-          <TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;">
-            <IconHighLight />
-          </TextColorButton>
-        </Tooltip>
+        <TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;" v-tooltip="'文字高亮'">
+          <IconHighLight />
+        </TextColorButton>
       </Popover>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
-        <Button 
-          class="font-size-btn"
-          style="flex: 2;"
-          @click="updateFontStyle('fontsize-add', '2')"
-        ><IconFontSize />+</Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
-        <Button 
-          class="font-size-btn"
-          style="flex: 2;"
-          @click="updateFontStyle('fontsize-reduce', '2')"
-        ><IconFontSize />-</Button>
-      </Tooltip>
+      <Button 
+        class="font-size-btn"
+        style="flex: 2;"
+        v-tooltip="'增大字号'"
+        @click="updateFontStyle('fontsize-add', '2')"
+      ><IconFontSize />+</Button>
+      <Button 
+        class="font-size-btn"
+        style="flex: 2;"
+        v-tooltip="'减小字号'"
+        @click="updateFontStyle('fontsize-reduce', '2')"
+      ><IconFontSize />-</Button>
     </ButtonGroup>
     <RadioGroup 
       class="row" 
@@ -126,15 +120,9 @@
       :value="richTextAttrs.align"
       @change="e => updateFontStyle('align', e.target.value)"
     >
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-        <RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
-      </Tooltip>
+      <RadioButton value="left" style="flex: 1;" v-tooltip="'左对齐'"><IconAlignTextLeft /></RadioButton>
+      <RadioButton value="center" style="flex: 1;" v-tooltip="'居中'"><IconAlignTextCenter /></RadioButton>
+      <RadioButton value="right" style="flex: 1;" v-tooltip="'右对齐'"><IconAlignTextRight /></RadioButton>
     </RadioGroup>
   </div>
 </template>
@@ -155,7 +143,6 @@ import {
   InputNumber,
   Divider,
   Button,
-  Tooltip,
   Popover,
   Select,
   Radio,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
index dbbfda2f..1a2d94c4 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ShapeStylePanel.vue
@@ -132,11 +132,9 @@
               @update:modelValue="value => emitRichTextCommand('color', value)"
             />
           </template>
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-            <TextColorButton :color="richTextAttrs.color" style="flex: 3;">
-              <IconText />
-            </TextColorButton>
-          </Tooltip>
+          <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;">
+            <IconText />
+          </TextColorButton>
         </Popover>
         <Popover trigger="click">
           <template #content>
@@ -145,73 +143,63 @@
               @update:modelValue="value => emitRichTextCommand('backcolor', value)"
             />
           </template>
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
-            <TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;">
-              <IconHighLight />
-            </TextColorButton>
-          </Tooltip>
+          <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;">
+            <IconHighLight />
+          </TextColorButton>
         </Popover>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
-          <Button 
-            class="font-size-btn"
-            style="flex: 2;"
-            @click="emitRichTextCommand('fontsize-add')"
-          ><IconFontSize />+</Button>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
-          <Button 
-            class="font-size-btn"
-            style="flex: 2;"
-            @click="emitRichTextCommand('fontsize-reduce')"
-          ><IconFontSize />-</Button>
-        </Tooltip>
+        <Button 
+          class="font-size-btn"
+          style="flex: 2;"
+          v-tooltip="'增大字号'"
+          @click="emitRichTextCommand('fontsize-add')"
+        ><IconFontSize />+</Button>
+        <Button 
+          class="font-size-btn"
+          style="flex: 2;"
+          v-tooltip="'减小字号'"
+          @click="emitRichTextCommand('fontsize-reduce')"
+        ><IconFontSize />-</Button>
       </ButtonGroup>
 
       <CheckboxButtonGroup class="row">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="加粗">
-          <CheckboxButton 
-            style="flex: 1;"
-            :checked="richTextAttrs.bold"
-            @click="emitRichTextCommand('bold')"
-          ><IconTextBold /></CheckboxButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
-          <CheckboxButton 
-            style="flex: 1;"
-            :checked="richTextAttrs.em"
-            @click="emitRichTextCommand('em')"
-          ><IconTextItalic /></CheckboxButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
-          <CheckboxButton 
-            style="flex: 1;"
-            :checked="richTextAttrs.underline"
-            @click="emitRichTextCommand('underline')"
-          ><IconTextUnderline /></CheckboxButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
-          <CheckboxButton 
-            style="flex: 1;"
-            :checked="richTextAttrs.strikethrough"
-            @click="emitRichTextCommand('strikethrough')"
-          ><IconStrikethrough /></CheckboxButton>
-        </Tooltip>
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.bold"
+          v-tooltip="'加粗'"
+          @click="emitRichTextCommand('bold')"
+        ><IconTextBold /></CheckboxButton>
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.em"
+          v-tooltip="'斜体'"
+          @click="emitRichTextCommand('em')"
+        ><IconTextItalic /></CheckboxButton>
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.underline"
+          v-tooltip="'下划线'"
+          @click="emitRichTextCommand('underline')"
+        ><IconTextUnderline /></CheckboxButton>
+        <CheckboxButton 
+          style="flex: 1;"
+          :checked="richTextAttrs.strikethrough"
+          v-tooltip="'删除线'"
+          @click="emitRichTextCommand('strikethrough')"
+        ><IconStrikethrough /></CheckboxButton>
       </CheckboxButtonGroup>
 
       <CheckboxButtonGroup class="row">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="清除格式">
-          <CheckboxButton
-            style="flex: 1;"
-            @click="emitRichTextCommand('clear')"
-          ><IconFormat /></CheckboxButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="格式刷">
-          <CheckboxButton
-            style="flex: 1;"
-            :checked="!!textFormatPainter"
-            @click="toggleFormatPainter()"
-          ><IconFormatBrush /></CheckboxButton>
-        </Tooltip>
+        <CheckboxButton
+          style="flex: 1;"
+          v-tooltip="'清除格式'"
+          @click="emitRichTextCommand('clear')"
+        ><IconFormat /></CheckboxButton>
+        <CheckboxButton
+          style="flex: 1;"
+          :checked="!!textFormatPainter"
+          v-tooltip="'格式刷'"
+          @click="toggleFormatPainter()"
+        ><IconFormatBrush /></CheckboxButton>
       </CheckboxButtonGroup>
 
       <Divider  />
@@ -222,15 +210,9 @@
         :value="richTextAttrs.align"
         @change="e => emitRichTextCommand('align', e.target.value)"
       >
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-          <RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-          <RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-          <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
-        </Tooltip>
+        <RadioButton value="left" v-tooltip="'左对齐'" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
+        <RadioButton value="center" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
+        <RadioButton value="right" v-tooltip="'右对齐'" style="flex: 1;"><IconAlignTextRight /></RadioButton>
       </RadioGroup>
 
       <RadioGroup 
@@ -239,15 +221,9 @@
         :value="textAlign"
         @change="e => updateTextAlign(e.target.value)"
       >
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="顶对齐">
-          <RadioButton value="top" style="flex: 1;"><IconAlignTextTopOne /></RadioButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-          <RadioButton value="middle" style="flex: 1;"><IconAlignTextMiddleOne /></RadioButton>
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="底对齐">
-          <RadioButton value="bottom" style="flex: 1;"><IconAlignTextBottomOne /></RadioButton>
-        </Tooltip>
+        <RadioButton value="top" v-tooltip="'顶对齐'" style="flex: 1;"><IconAlignTextTopOne /></RadioButton>
+        <RadioButton value="middle" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextMiddleOne /></RadioButton>
+        <RadioButton value="bottom" v-tooltip="'底对齐'" style="flex: 1;"><IconAlignTextBottomOne /></RadioButton>
       </RadioGroup>
 
       <Divider  />
@@ -285,7 +261,6 @@ import ShapeItemThumbnail from '@/views/Editor/CanvasTool/ShapeItemThumbnail.vue
 import {
   Divider,
   Button,
-  Tooltip,
   Popover,
   Slider,
   Select,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
index 165a21a2..3073b078 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TableStylePanel.vue
@@ -38,11 +38,9 @@
             @update:modelValue="value => updateTextAttrs({ color: value })"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-          <TextColorButton :color="textAttrs.color" style="flex: 1;">
-            <IconText />
-          </TextColorButton>
-        </Tooltip>
+        <TextColorButton v-tooltip="'文字颜色'" :color="textAttrs.color" style="flex: 1;">
+          <IconText />
+        </TextColorButton>
       </Popover>
       <Popover trigger="click">
         <template #content>
@@ -51,43 +49,37 @@
             @update:modelValue="value => updateTextAttrs({ backcolor: value })"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="单元格填充">
-          <TextColorButton :color="textAttrs.backcolor" style="flex: 1;">
-            <IconFill />
-          </TextColorButton>
-        </Tooltip>
+        <TextColorButton v-tooltip="'单元格填充'" :color="textAttrs.backcolor" style="flex: 1;">
+          <IconFill />
+        </TextColorButton>
       </Popover>
     </ButtonGroup>
 
     <CheckboxButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="加粗">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="textAttrs.bold"
-          @click="updateTextAttrs({ bold: !textAttrs.bold })"
-        ><IconTextBold /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="textAttrs.em"
-          @click="updateTextAttrs({ em: !textAttrs.em })"
-        ><IconTextItalic /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="textAttrs.underline"
-          @click="updateTextAttrs({ underline: !textAttrs.underline })"
-        ><IconTextUnderline /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="textAttrs.strikethrough"
-          @click="updateTextAttrs({ strikethrough: !textAttrs.strikethrough })"
-        ><IconStrikethrough /></CheckboxButton>
-      </Tooltip>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="textAttrs.bold"
+        v-tooltip="'加粗'"
+        @click="updateTextAttrs({ bold: !textAttrs.bold })"
+      ><IconTextBold /></CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="textAttrs.em"
+        v-tooltip="'斜体'"
+        @click="updateTextAttrs({ em: !textAttrs.em })"
+      ><IconTextItalic /></CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="textAttrs.underline"
+        v-tooltip="'下划线'"
+        @click="updateTextAttrs({ underline: !textAttrs.underline })"
+      ><IconTextUnderline /></CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="textAttrs.strikethrough"
+        v-tooltip="'删除线'"
+        @click="updateTextAttrs({ strikethrough: !textAttrs.strikethrough })"
+      ><IconStrikethrough /></CheckboxButton>
     </CheckboxButtonGroup>
 
     <RadioGroup 
@@ -96,15 +88,9 @@
       :value="textAttrs.align"
       @change="e => updateTextAttrs({ align: e.target.value })"
     >
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-        <RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
-      </Tooltip>
+      <RadioButton value="left" v-tooltip="'左对齐'" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
+      <RadioButton value="center" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
+      <RadioButton value="right" v-tooltip="'右对齐'" style="flex: 1;"><IconAlignTextRight /></RadioButton>
     </RadioGroup>
 
     <Divider />
@@ -201,7 +187,6 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
 import {
   Divider,
   Button,
-  Tooltip,
   Popover,
   Select,
   Switch,
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index cca11f00..dbe76ec2 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -51,11 +51,9 @@
             @update:modelValue="value => emitRichTextCommand('color', value)"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字颜色">
-          <TextColorButton :color="richTextAttrs.color" style="flex: 3;">
-            <IconText />
-          </TextColorButton>
-        </Tooltip>
+        <TextColorButton v-tooltip="'文字颜色'" :color="richTextAttrs.color" style="flex: 3;">
+          <IconText />
+        </TextColorButton>
       </Popover>
       <Popover trigger="click">
         <template #content>
@@ -64,122 +62,107 @@
             @update:modelValue="value => emitRichTextCommand('backcolor', value)"
           />
         </template>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="文字高亮">
-          <TextColorButton :color="richTextAttrs.backcolor" style="flex: 3;">
-            <IconHighLight />
-          </TextColorButton>
-        </Tooltip>
+        <TextColorButton v-tooltip="'文字高亮'" :color="richTextAttrs.backcolor" style="flex: 3;">
+          <IconHighLight />
+        </TextColorButton>
       </Popover>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大字号">
-        <Button 
-          class="font-size-btn"
-          style="flex: 2;"
-          @click="emitRichTextCommand('fontsize-add')"
-        ><IconFontSize />+</Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小字号">
-        <Button 
-          class="font-size-btn"
-          style="flex: 2;"
-          @click="emitRichTextCommand('fontsize-reduce')"
-        ><IconFontSize />-</Button>
-      </Tooltip>
+      <Button 
+        class="font-size-btn"
+        style="flex: 2;"
+        v-tooltip="'增大字号'"
+        @click="emitRichTextCommand('fontsize-add')"
+      ><IconFontSize />+</Button>
+      <Button 
+        class="font-size-btn"
+        style="flex: 2;"
+        v-tooltip="'减小字号'"
+        @click="emitRichTextCommand('fontsize-reduce')"
+      ><IconFontSize />-</Button>
     </ButtonGroup>
 
     <CheckboxButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="加粗">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="richTextAttrs.bold"
-          @click="emitRichTextCommand('bold')"
-        ><IconTextBold /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="斜体">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="richTextAttrs.em"
-          @click="emitRichTextCommand('em')"
-        ><IconTextItalic /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下划线">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="richTextAttrs.underline"
-          @click="emitRichTextCommand('underline')"
-        ><IconTextUnderline /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="删除线">
-        <CheckboxButton 
-          style="flex: 1;"
-          :checked="richTextAttrs.strikethrough"
-          @click="emitRichTextCommand('strikethrough')"
-        ><IconStrikethrough /></CheckboxButton>
-      </Tooltip>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="richTextAttrs.bold"
+        v-tooltip="'加粗'"
+        @click="emitRichTextCommand('bold')"
+      ><IconTextBold /></CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="richTextAttrs.em"
+        v-tooltip="'斜体'"
+        @click="emitRichTextCommand('em')"
+      ><IconTextItalic /></CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="richTextAttrs.underline"
+        v-tooltip="'下划线'"
+        @click="emitRichTextCommand('underline')"
+      ><IconTextUnderline /></CheckboxButton>
+      <CheckboxButton 
+        style="flex: 1;"
+        :checked="richTextAttrs.strikethrough"
+        v-tooltip="'删除线'"
+        @click="emitRichTextCommand('strikethrough')"
+      ><IconStrikethrough /></CheckboxButton>
     </CheckboxButtonGroup>
 
     <CheckboxButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上标">
-        <CheckboxButton
-          style="flex: 1;"
-          :checked="richTextAttrs.superscript"
-          @click="emitRichTextCommand('superscript')"
-        >A²</CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下标">
-        <CheckboxButton
-          style="flex: 1;"
-          :checked="richTextAttrs.subscript"
-          @click="emitRichTextCommand('subscript')"
-        >A₂</CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="行内代码">
-        <CheckboxButton
-          style="flex: 1;"
-          :checked="richTextAttrs.code"
-          @click="emitRichTextCommand('code')"
-        ><IconCode /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="引用">
-        <CheckboxButton
-          style="flex: 1;"
-          :checked="richTextAttrs.blockquote"
-          @click="emitRichTextCommand('blockquote')"
-        ><IconQuote /></CheckboxButton>
-      </Tooltip>
+      <CheckboxButton
+        style="flex: 1;"
+        :checked="richTextAttrs.superscript"
+        v-tooltip="'上标'"
+        @click="emitRichTextCommand('superscript')"
+      >A²</CheckboxButton>
+      <CheckboxButton
+        style="flex: 1;"
+        :checked="richTextAttrs.subscript"
+        v-tooltip="'下标'"
+        @click="emitRichTextCommand('subscript')"
+      >A₂</CheckboxButton>>
+      <CheckboxButton
+        style="flex: 1;"
+        :checked="richTextAttrs.code"
+        v-tooltip="'行内代码'"
+        @click="emitRichTextCommand('code')"
+      ><IconCode /></CheckboxButton>
+      <CheckboxButton
+        style="flex: 1;"
+        :checked="richTextAttrs.blockquote"
+        v-tooltip="'引用'"
+        @click="emitRichTextCommand('blockquote')"
+      ><IconQuote /></CheckboxButton>
     </CheckboxButtonGroup>
 
     <CheckboxButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="清除格式">
-        <CheckboxButton
-          style="flex: 1;"
-          @click="emitRichTextCommand('clear')"
-        ><IconFormat /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="格式刷">
-        <CheckboxButton
-          style="flex: 1;"
-          :checked="!!textFormatPainter"
-          @click="toggleFormatPainter()"
-        ><IconFormatBrush /></CheckboxButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="超链接">
-        <Popover placement="bottomRight" trigger="click" v-model:open="linkPopoverVisible">
-          <template #content>
-            <div class="link-popover">
-              <Input v-model:value="link" placeholder="请输入超链接" />
-              <div class="btns">
-                <Button size="small" :disabled="!richTextAttrs.link" @click="updateLink()" style="margin-right: 5px;">移除</Button>
-                <Button size="small" type="primary" @click="updateLink(link)">确认</Button>
-              </div>
+      <CheckboxButton
+        style="flex: 1;"
+        v-tooltip="'清除格式'"
+        @click="emitRichTextCommand('clear')"
+      ><IconFormat /></CheckboxButton>
+      <CheckboxButton
+        style="flex: 1;"
+        :checked="!!textFormatPainter"
+        v-tooltip="'格式刷'"
+        @click="toggleFormatPainter()"
+      ><IconFormatBrush /></CheckboxButton>
+      <Popover placement="bottomRight" trigger="click" v-model:open="linkPopoverVisible">
+        <template #content>
+          <div class="link-popover">
+            <Input v-model:value="link" placeholder="请输入超链接" />
+            <div class="btns">
+              <Button size="small" :disabled="!richTextAttrs.link" @click="updateLink()" style="margin-right: 5px;">移除</Button>
+              <Button size="small" type="primary" @click="updateLink(link)">确认</Button>
             </div>
-          </template>
-          <CheckboxButton
-            style="flex: 1;"
-            :checked="!!richTextAttrs.link"
-            @click="openLinkPopover()"
-          ><IconLinkOne /></CheckboxButton>
-        </Popover>
-      </Tooltip>
+          </div>
+        </template>
+        <CheckboxButton
+          style="flex: 1;"
+          :checked="!!richTextAttrs.link"
+          v-tooltip="'超链接'"
+          @click="openLinkPopover()"
+        ><IconLinkOne /></CheckboxButton>
+      </Popover>
     </CheckboxButtonGroup>
 
     <Divider />
@@ -190,29 +173,20 @@
       :value="richTextAttrs.align"
       @change="e => emitRichTextCommand('align', e.target.value)"
     >
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <RadioButton value="left" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="居中">
-        <RadioButton value="center" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <RadioButton value="right" style="flex: 1;"><IconAlignTextRight /></RadioButton>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="两端对齐">
-        <RadioButton value="justify" style="flex: 1;"><IconAlignTextBoth /></RadioButton>
-      </Tooltip>
+      <RadioButton value="left" v-tooltip="'左对齐'" style="flex: 1;"><IconAlignTextLeft /></RadioButton>
+      <RadioButton value="center" v-tooltip="'居中'" style="flex: 1;"><IconAlignTextCenter /></RadioButton>
+      <RadioButton value="right" v-tooltip="'右对齐'" style="flex: 1;"><IconAlignTextRight /></RadioButton>
+      <RadioButton value="justify" v-tooltip="'两端对齐'" style="flex: 1;"><IconAlignTextBoth /></RadioButton>
     </RadioGroup>
 
     <div class="row">
       <ButtonGroup style="flex: 15;">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="项目符号">
-          <Button
-            :type="richTextAttrs.bulletList ? 'primary' : 'default'"
-            style="flex: 1;"
-            @click="emitRichTextCommand('bulletList')"
-          ><IconList /></Button>
-        </Tooltip>
+        <Button
+          :type="richTextAttrs.bulletList ? 'primary' : 'default'"
+          style="flex: 1;"
+          v-tooltip="'项目符号'"
+          @click="emitRichTextCommand('bulletList')"
+        ><IconList /></Button>
         <Popover trigger="click" v-model:open="bulletListPanelVisible">
           <template #content>
             <div class="list-wrap">
@@ -231,13 +205,12 @@
       </ButtonGroup>
       <div style="flex: 1;"></div>
       <ButtonGroup style="flex: 15;">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="编号">
-          <Button
-            :type="richTextAttrs.orderedList ? 'primary' : 'default'"
-            style="flex: 1;"
-            @click="emitRichTextCommand('orderedList')"
-          ><IconOrderedList /></Button>
-        </Tooltip>
+        <Button
+          :type="richTextAttrs.orderedList ? 'primary' : 'default'"
+          style="flex: 1;"
+          v-tooltip="'编号'"
+          @click="emitRichTextCommand('orderedList')"
+        ><IconOrderedList /></Button>
         <Popover trigger="click" v-model:open="orderedListPanelVisible">
           <template #content>
             <div class="list-wrap">
@@ -258,9 +231,7 @@
 
     <div class="row">
       <ButtonGroup style="flex: 15;">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="减小段落缩进">
-          <Button style="flex: 1;" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
-        </Tooltip>
+        <Button style="flex: 1;" v-tooltip="'减小段落缩进'" @click="emitRichTextCommand('indent', '-1')"><IconIndentLeft /></Button>
         <Popover trigger="click" v-model:open="indentLeftPanelVisible">
           <template #content>
             <div class="popover-list">
@@ -272,9 +243,7 @@
       </ButtonGroup>
       <div style="flex: 1;"></div>
       <ButtonGroup style="flex: 15;">
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="增大段落缩进">
-          <Button style="flex: 1;" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
-        </Tooltip>
+        <Button style="flex: 1;" v-tooltip="'增大段落缩进'" @click="emitRichTextCommand('indent', '+1')"><IconIndentRight /></Button>
         <Popover trigger="click" v-model:open="indentRightPanelVisible">
           <template #content>
             <div class="popover-list">
@@ -352,7 +321,6 @@ import ColorPicker from '@/components/ColorPicker/index.vue'
 import {
   Divider,
   Button,
-  Tooltip,
   Popover,
   Select,
   Radio,
diff --git a/src/views/Editor/Toolbar/MultiPositionPanel.vue b/src/views/Editor/Toolbar/MultiPositionPanel.vue
index b8061371..111748ce 100644
--- a/src/views/Editor/Toolbar/MultiPositionPanel.vue
+++ b/src/views/Editor/Toolbar/MultiPositionPanel.vue
@@ -1,26 +1,14 @@
 <template>
   <div class="multi-position-panel">
     <ButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="左对齐">
-        <Button style="flex: 1;" @click="alignElement(ElementAlignCommands.LEFT)"><IconAlignLeft /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="水平居中">
-        <Button style="flex: 1;" @click="alignElement(ElementAlignCommands.HORIZONTAL)"><IconAlignHorizontally /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="右对齐">
-        <Button style="flex: 1;" @click="alignElement(ElementAlignCommands.RIGHT)"><IconAlignRight /></Button>
-      </Tooltip>
+      <Button style="flex: 1;" v-tooltip="'左对齐'" @click="alignElement(ElementAlignCommands.LEFT)"><IconAlignLeft /></Button>
+      <Button style="flex: 1;" v-tooltip="'水平居中'" @click="alignElement(ElementAlignCommands.HORIZONTAL)"><IconAlignHorizontally /></Button>
+      <Button style="flex: 1;" v-tooltip="'右对齐'" @click="alignElement(ElementAlignCommands.RIGHT)"><IconAlignRight /></Button>
     </ButtonGroup>
     <ButtonGroup class="row">
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="上对齐">
-        <Button style="flex: 1;" @click="alignElement(ElementAlignCommands.TOP)"><IconAlignTop /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="垂直居中">
-        <Button style="flex: 1;" @click="alignElement(ElementAlignCommands.VERTICAL)"><IconAlignVertically /></Button>
-      </Tooltip>
-      <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="下对齐">
-        <Button style="flex: 1;" @click="alignElement(ElementAlignCommands.BOTTOM)"><IconAlignBottom /></Button>
-      </Tooltip>
+      <Button style="flex: 1;" v-tooltip="'上对齐'" @click="alignElement(ElementAlignCommands.TOP)"><IconAlignTop /></Button>
+      <Button style="flex: 1;" v-tooltip="'垂直居中'" @click="alignElement(ElementAlignCommands.VERTICAL)"><IconAlignVertically /></Button>
+      <Button style="flex: 1;" v-tooltip="'下对齐'" @click="alignElement(ElementAlignCommands.BOTTOM)"><IconAlignBottom /></Button>
     </ButtonGroup>
     <ButtonGroup class="row" v-if="displayItemCount > 2">
       <Button style="flex: 1;" @click="uniformHorizontalDisplay()">水平均匀分布</Button>
@@ -46,7 +34,6 @@ import useUniformDisplayElement from '@/hooks/useUniformDisplayElement'
 import {
   Divider,
   Button,
-  Tooltip,
 } from 'ant-design-vue'
 const ButtonGroup = Button.Group
 
diff --git a/src/views/Screen/BaseView.vue b/src/views/Screen/BaseView.vue
index 7f8722e2..81c24b40 100644
--- a/src/views/Screen/BaseView.vue
+++ b/src/views/Screen/BaseView.vue
@@ -42,25 +42,13 @@
     >
       <div class="content">
         <div class="tool-btn page-number" @click="slideThumbnailModelVisible = true">幻灯片 {{slideIndex + 1}} / {{slides.length}}</div>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔工具">
-          <IconWrite class="tool-btn" @click="writingBoardToolVisible = true" />
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="激光笔">
-          <IconMagic class="tool-btn" :class="{ 'active': laserPen }" @click="laserPen = !laserPen" />
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="计时器">
-          <IconStopwatchStart class="tool-btn" :class="{ 'active': timerlVisible }" @click="timerlVisible = !timerlVisible" />
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="演讲者视图">
-          <IconListView class="tool-btn" @click="changeViewMode('presenter')" />
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" :title="fullscreenState ? '退出全屏' : '进入全屏'">
-          <IconOffScreenOne class="tool-btn" v-if="fullscreenState" @click="manualExitFullscreen()" />
-          <IconFullScreenOne class="tool-btn" v-else @click="enterFullscreen()" />
-        </Tooltip>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="结束放映">
-          <IconPower class="tool-btn" @click="exitScreening()" />
-        </Tooltip>
+        <IconWrite class="tool-btn" v-tooltip="'画笔工具'" @click="writingBoardToolVisible = true" />
+        <IconMagic class="tool-btn" v-tooltip="'激光笔'" :class="{ 'active': laserPen }" @click="laserPen = !laserPen" />
+        <IconStopwatchStart class="tool-btn" v-tooltip="'计时器'" :class="{ 'active': timerlVisible }" @click="timerlVisible = !timerlVisible" />
+        <IconListView class="tool-btn" v-tooltip="'演讲者视图'" @click="changeViewMode('presenter')" />
+        <IconOffScreenOne class="tool-btn" v-tooltip="'退出全屏'" v-if="fullscreenState" @click="manualExitFullscreen()" />
+        <IconFullScreenOne class="tool-btn" v-tooltip="'进入全屏'" v-else @click="enterFullscreen()" />
+        <IconPower class="tool-btn" v-tooltip="'结束放映'" @click="exitScreening()" />
       </div>
     </div>
   </div>
@@ -81,7 +69,6 @@ import ScreenSlideList from './ScreenSlideList.vue'
 import SlideThumbnails from './SlideThumbnails.vue'
 import WritingBoardTool from './WritingBoardTool.vue'
 import CountdownTimer from './CountdownTimer.vue'
-import { Tooltip } from 'ant-design-vue'
 
 const props = defineProps<{
   changeViewMode: (mode: 'base' | 'presenter') => void
diff --git a/src/views/Screen/WritingBoardTool.vue b/src/views/Screen/WritingBoardTool.vue
index ae191473..39a6eeda 100644
--- a/src/views/Screen/WritingBoardTool.vue
+++ b/src/views/Screen/WritingBoardTool.vue
@@ -35,9 +35,9 @@
                 <Slider class="size-slider" :min="4" :max="10" :step="2" v-model:value="penSize" />
               </div>
             </template>
-            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="画笔">
-              <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" @click="changeModel('pen')"><IconWrite class="icon" /></div>
-            </Tooltip>
+            <div class="btn" :class="{ 'active': writingBoardModel === 'pen' }" v-tooltip="'画笔'" @click="changeModel('pen')">
+              <IconWrite class="icon" />
+            </div>
           </Popover>
           <Popover trigger="click" :open="sizePopoverType === 'mark'">
             <template #content>
@@ -46,9 +46,9 @@
                 <Slider class="size-slider" :min="16" :max="40" :step="4" v-model:value="markSize" />
               </div>
             </template>
-            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="荧光笔">
-              <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" @click="changeModel('mark')"><IconHighLight class="icon" /></div>
-            </Tooltip>
+            <div class="btn" :class="{ 'active': writingBoardModel === 'mark' }" v-tooltip="'荧光笔'" @click="changeModel('mark')">
+              <IconHighLight class="icon" />
+            </div>
           </Popover>
           <Popover trigger="click" :open="sizePopoverType === 'eraser'">
             <template #content>
@@ -57,16 +57,16 @@
                 <Slider class="size-slider" :min="20" :max="200" :step="20" v-model:value="rubberSize" />
               </div>
             </template>
-            <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="橡皮擦">
-              <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" @click="changeModel('eraser')"><IconErase class="icon" /></div>
-            </Tooltip>
+            <div class="btn" :class="{ 'active': writingBoardModel === 'eraser' }" v-tooltip="'橡皮擦'" @click="changeModel('eraser')">
+              <IconErase class="icon" />
+            </div>
           </Popover>
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="清除墨迹">
-            <div class="btn" @click="clearCanvas()"><IconClear class="icon" /></div>
-          </Tooltip>
-          <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="黑板">
-            <div class="btn" :class="{ 'active': blackboard }" @click="blackboard = !blackboard"><IconFill class="icon" /></div>
-          </Tooltip>
+          <div class="btn" v-tooltip="'清除墨迹'" @click="clearCanvas()">
+            <IconClear class="icon" />
+          </div>
+          <div class="btn" :class="{ 'active': blackboard }" v-tooltip="'黑板'" @click="blackboard = !blackboard">
+            <IconFill class="icon" />
+          </div>
           <div class="colors">
             <div 
               class="color" 
@@ -78,9 +78,9 @@
             ></div>
           </div>
         </div>
-        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.3" title="关闭画笔">
-          <div class="btn" @click="closeWritingBoard()"><IconClose class="icon" /></div>
-        </Tooltip>
+        <div class="btn" v-tooltip="'关闭画笔'" @click="closeWritingBoard()">
+          <IconClose class="icon" />
+        </div>
       </div>
     </MoveablePanel>
   </div>
@@ -95,7 +95,6 @@ import { db } from '@/utils/database'
 import WritingBoard from '@/components/WritingBoard.vue'
 import MoveablePanel from '@/components/MoveablePanel.vue'
 import {
-  Tooltip,
   Popover,
   Slider,
 } from 'ant-design-vue'