From e9c0107faeb8fb2c23d989f114c6ede3c4ffa69e Mon Sep 17 00:00:00 2001
From: zhuangchong <zhuangchong6@163.com>
Date: Tue, 26 Jan 2021 14:08:41 +0800
Subject: [PATCH 1/2] imp ui dag button tooltip.

---
 .../js/conf/home/pages/dag/_source/dag.vue    | 55 ++++++++++---------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index a61d289d3d..492f41dd20 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -70,32 +70,38 @@
                :id="item.code"
                :key="$index"
                @click="_ckOperation(item,$event)">
-              <el-button type="text" class="operBtn" data-container="body" :icon="item.icon" v-tooltip.light="item.desc"></el-button>
+              <el-tooltip :content="item.desc" placement="top" :enterable="false">
+                <span><el-button type="text" class="operBtn" data-container="body" :icon="item.icon"></el-button></span>
+              </el-tooltip>
             </a>
           </div>
-          <el-button
-            type="primary"
-            v-tooltip.light="$t('Format DAG')"
-            icon="el-icon-caret-right"
-            size="mini"
-            data-container="body"
-            v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
-            style="vertical-align: middle;"
-            @click="dagAutomaticLayout">
-          </el-button>
-          <span>
-            <el-button
-              v-tooltip.light="$t('Refresh DAG status')"
-              data-container="body"
-              style="vertical-align: middle;"
-              icon="el-icon-refresh"
-              type="primary"
-              :loading="isRefresh"
-              v-if="type === 'instance'"
-              @click="!isRefresh && _refresh()"
-              size="mini" >
-            </el-button>
-          </span>
+          <el-tooltip :content="$t('Format DAG')" placement="top" :enterable="false">
+            <span>
+              <el-button
+                type="primary"
+                icon="el-icon-caret-right"
+                size="mini"
+                data-container="body"
+                v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
+                style="vertical-align: middle;"
+                @click="dagAutomaticLayout">
+              </el-button>
+            </span>
+          </el-tooltip>
+          <el-tooltip :content="$t('Refresh DAG status')" placement="top" :enterable="false">
+            <span>
+              <el-button
+                data-container="body"
+                style="vertical-align: middle;"
+                icon="el-icon-refresh"
+                type="primary"
+                :loading="isRefresh"
+                v-if="type === 'instance'"
+                @click="!isRefresh && _refresh()"
+                size="mini" >
+              </el-button>
+            </span>
+          </el-tooltip>
           <el-button
                   v-if="isRtTasks"
                   style="vertical-align: middle;"
@@ -108,7 +114,6 @@
           <span>
             <el-button
               type="primary"
-              v-tooltip.light="$t('Close')"
               icon="el-icon-switch-button"
               size="mini"
               data-container="body"

From c4013c98231eda71a4186bb9d26980adea2593b4 Mon Sep 17 00:00:00 2001
From: zhuangchong <zhuangchong6@163.com>
Date: Tue, 26 Jan 2021 19:15:50 +0800
Subject: [PATCH 2/2] delete the data-container attribute.

---
 .../js/conf/home/pages/dag/_source/dag.vue    | 41 +++++++++----------
 1 file changed, 19 insertions(+), 22 deletions(-)

diff --git a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
index 492f41dd20..c56d73f443 100755
--- a/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
+++ b/dolphinscheduler-ui/src/js/conf/home/pages/dag/_source/dag.vue
@@ -34,30 +34,30 @@
     <div class="dag-contect">
       <div class="dag-toolbar">
         <div class="assist-btn">
-          <el-button
-            style="vertical-align: middle;"
-            data-toggle="tooltip"
-            :title="$t('View variables')"
-            data-container="body"
-            type="primary"
-            size="mini"
-            :disabled="$route.name !== 'projects-instance-details'"
-            @click="_toggleView"
-            icon="el-icon-c-scale-to-original">
-          </el-button>
-          <span>
+          <el-tooltip :content="$t('View variables')" placement="top" :enterable="false">
+           <span>
             <el-button
               style="vertical-align: middle;"
-              data-toggle="tooltip"
-              :title="$t('Startup parameter')"
-              data-container="body"
               type="primary"
               size="mini"
               :disabled="$route.name !== 'projects-instance-details'"
-              @click="_toggleParam"
-              icon="el-icon-arrow-right">
+              @click="_toggleView"
+              icon="el-icon-c-scale-to-original">
             </el-button>
-          </span>
+           </span>
+          </el-tooltip>
+          <el-tooltip :content="$t('Startup parameter')" placement="top" :enterable="false">
+            <span>
+              <el-button
+                style="vertical-align: middle;"
+                type="primary"
+                size="mini"
+                :disabled="$route.name !== 'projects-instance-details'"
+                @click="_toggleParam"
+                icon="el-icon-arrow-right">
+              </el-button>
+            </span>
+          </el-tooltip>
           <span class="name">{{name}}</span>
           &nbsp;
           <span v-if="name"  class="copy-name" @click="_copyName" :data-clipboard-text="name"><em class="el-icon-copy-document" data-container="body"  data-toggle="tooltip" :title="$t('Copy name')" ></em></span>
@@ -71,7 +71,7 @@
                :key="$index"
                @click="_ckOperation(item,$event)">
               <el-tooltip :content="item.desc" placement="top" :enterable="false">
-                <span><el-button type="text" class="operBtn" data-container="body" :icon="item.icon"></el-button></span>
+                <span><el-button type="text" class="operBtn" :icon="item.icon"></el-button></span>
               </el-tooltip>
             </a>
           </div>
@@ -81,7 +81,6 @@
                 type="primary"
                 icon="el-icon-caret-right"
                 size="mini"
-                data-container="body"
                 v-if="(type === 'instance' || 'definition') && urlParam.id !=undefined"
                 style="vertical-align: middle;"
                 @click="dagAutomaticLayout">
@@ -91,7 +90,6 @@
           <el-tooltip :content="$t('Refresh DAG status')" placement="top" :enterable="false">
             <span>
               <el-button
-                data-container="body"
                 style="vertical-align: middle;"
                 icon="el-icon-refresh"
                 type="primary"
@@ -116,7 +114,6 @@
               type="primary"
               icon="el-icon-switch-button"
               size="mini"
-              data-container="body"
               v-if="(type === 'instance' || 'definition') "
               style="vertical-align: middle;"
               @click="_closeDAG">