Merge branch 'dev-3.8' of https://git.mesalab.cn/nezha/nezha-fronted into dev-3.8rel-23.07.13

21 files changed, 455 insertions, 511 deletions

diff --git a/nezha-fronted/src/assets/css/components/chart/chart.scss b/nezha-fronted/src/assets/css/components/chart/chart.scss
index 231e3301d..ca1b18293 100644
--- a/nezha-fronted/src/assets/css/components/chart/chart.scss
+++ b/nezha-fronted/src/assets/css/components/chart/chart.scss
@@ -683,10 +683,10 @@
   }
 }
 
-.chart-dataLink-tooltip{
+.chart-toolbox{
   position: absolute !important;
   padding-bottom: 2px !important;
-  z-index: 999999999;
+  z-index: 9999;
   pointer-events: auto;
   .chart-dataLink-list{
     width: calc(100% + 20px);
diff --git a/nezha-fronted/src/components/chart/chart/chartBar.vue b/nezha-fronted/src/components/chart/chart/chartBar.vue
index 95c99c585..25c719b94 100644
--- a/nezha-fronted/src/components/chart/chart/chartBar.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBar.vue
@@ -14,20 +14,20 @@
       :series="series"
       :is-fullscreen="isFullscreen"
     ></chart-legend>
-
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
         <div>
-          <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
-            <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
           </div>
-          <div style="display: inline-block">{{tooltip.value}}</div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
         </div>
       </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -160,12 +160,6 @@ export default {
         this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
         if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
           myChart.on('click', this.chartClick)
-          myChart.on('mousedown', (params) => {
-            if (this.tooltip.dataLinkShow) {
-              const e = params.event.event
-              e.stopPropagation()
-            }
-          })
         }
         this.isInit = false
       }, 200)
@@ -231,56 +225,45 @@ export default {
               </div>
                `
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['bar-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['bar-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (params) {
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:hidden;transition:none;'
-        }
-      }
-      getChart(this.chartId).setOption(option)
-      this.tooltip.title = params.data.alias
-      this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
-      this.tooltip.mapping = params.data.mapping
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.metric.labels = params.data.labels
-      this.tooltip.metric.expressionIndex = params.data.expressionIndex
+      getChart(this.chartId).dispatchAction({
+        type: 'hideTip'
+      })
+      this.toolbox.title = params.data.alias
+      this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
+      this.toolbox.mapping = params.data.mapping
+      this.toolbox.show = true
+      this.toolbox.metric.labels = params.data.labels
+      this.toolbox.metric.expressionIndex = params.data.expressionIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
-        const option = {
-          tooltip: {
-            extraCssText: 'z-index:99999999;visibility:visible;'
-          }
-        }
-        getChart(this.chartId).setOption(option)
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartBubble.vue b/nezha-fronted/src/components/chart/chart/chartBubble.vue
index 9b92de4d5..b10227f36 100644
--- a/nezha-fronted/src/components/chart/chart/chartBubble.vue
+++ b/nezha-fronted/src/components/chart/chart/chartBubble.vue
@@ -6,7 +6,8 @@
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
       <svg :id="`bubble-svg-${chartId}`" width="100%" height="100%"></svg>
     </div>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -19,8 +20,23 @@
           <div style="display: inline-block">{{tooltip.value}}</div>
         </div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -194,7 +210,6 @@ export default {
       bubbles.on('mousemove', this.bubbleMove)
       bubbles.on('mouseleave', this.bubbleLeave)
       bubbles.on('click', this.chartClick)
-      bubbles.on('mousedown', this.chartMousedown)
     },
     // 处理label
     bubbleFormatterLabel (node) {
@@ -246,7 +261,6 @@ export default {
       }
     },
     bubbleEnter (e, node) { // 移入气泡
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = node.data.alias
       this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue
       this.tooltip.mapping = node.data.mapping
@@ -254,12 +268,10 @@ export default {
       this.setPosition(e)
     },
     bubbleMove (e) { // 气泡内移动
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     bubbleLeave () { // 移出气泡
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -297,55 +309,49 @@ export default {
         this.svg.selectAll('.bubble').on('mousemove', null)
         this.svg.selectAll('.bubble').on('mouseleave', null)
         this.svg.selectAll('.bubble').on('click', null)
-        this.svg.selectAll('.bubble').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['bubble-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['bubble-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.data.alias
-        this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
-        this.tooltip.mapping = data.data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.data.labels
-        this.tooltip.metric.expressionIndex = data.data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.data.alias
+        this.toolbox.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
+        this.toolbox.mapping = data.data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.data.labels
+        this.toolbox.metric.expressionIndex = data.data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
index 7a7e193ff..93ab038e1 100644
--- a/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
+++ b/nezha-fronted/src/components/chart/chart/chartDoughnut.vue
@@ -15,8 +15,8 @@
       @clickLegendD3="clickLegendD3"
       @hoverLegendD3="hoverLegendD3"
     ></chart-legend>
-
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -33,8 +33,27 @@
         <div>percent</div>
         <div>{{tooltip.percent}}%</div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>percent</div>
+        <div>{{toolbox.percent}}%</div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -237,7 +256,6 @@ export default {
         .on('mousemove', this.doughnutMove)
         .on('mouseleave', this.doughnutLeave)
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
         .transition().duration(animate === true ? 600 : 0)
         .attrTween('d', function (d) {
           const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
@@ -263,7 +281,6 @@ export default {
         .on('mousemove', this.doughnutMove)
         .on('mouseleave', this.doughnutLeave)
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
         .style('opacity', 0)
         .html((d) => {
           return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
@@ -324,7 +341,6 @@ export default {
       }
     },
     doughnutEnter (e, node) {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = node.data.alias
       this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue
       this.tooltip.percent = node.percent
@@ -333,12 +349,10 @@ export default {
       this.setPosition(e)
     },
     doughnutMove (e) {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     doughnutLeave () {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -397,62 +411,56 @@ export default {
         this.svg.selectAll('path').on('mousemove', null)
         this.svg.selectAll('path').on('mouseleave', null)
         this.svg.selectAll('path').on('click', null)
-        this.svg.selectAll('path').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseover', null)
         this.svg.selectAll('foreignObject').on('mouseout', null)
         this.svg.selectAll('foreignObject').on('mouseenter', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
-        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.remove()
         this.svg = null
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['doughnut-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['doughnut-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.data.alias
-        this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
-        this.tooltip.mapping = data.data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.data.labels
-        this.tooltip.metric.expressionIndex = data.data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.data.alias
+        this.toolbox.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
+        this.toolbox.percent = data.percent
+        this.toolbox.mapping = data.data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.data.labels
+        this.toolbox.metric.expressionIndex = data.data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartFunnel.vue b/nezha-fronted/src/components/chart/chart/chartFunnel.vue
index 535cd5fe7..26ec41e60 100644
--- a/nezha-fronted/src/components/chart/chart/chartFunnel.vue
+++ b/nezha-fronted/src/components/chart/chart/chartFunnel.vue
@@ -6,8 +6,8 @@
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
       <svg :id="`funnel-svg-${chartId}`" width="100%" height="100%"></svg>
     </div>
-
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -20,8 +20,23 @@
           <div style="display: inline-block">{{tooltip.value}}</div>
         </div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -197,7 +212,6 @@ export default {
           this.chartLeave()
         })
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
 
       function getPoints (topWidth, bottomWidth, height) {
         const points = []
@@ -234,7 +248,6 @@ export default {
           this.chartLeave()
         })
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
         .style('opacity', 0)
         .transition('opacity').duration(animate === true ? 600 : 0)
         .style('opacity', 1)
@@ -299,7 +312,6 @@ export default {
       }
     },
     chartEnter (e, data) {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = data.alias
       this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
       this.tooltip.mapping = data.mapping
@@ -307,12 +319,10 @@ export default {
       this.setPosition(e)
     },
     chartMove (e) {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     chartLeave () {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -388,60 +398,53 @@ export default {
         this.svg.selectAll('.trap').on('mousemove', null)
         this.svg.selectAll('.trap').on('mouseleave', null)
         this.svg.selectAll('.trap').on('click', null)
-        this.svg.selectAll('.trap').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseover', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
-        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['funnel-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['funnel-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.alias
-        this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
-        this.tooltip.mapping = data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.labels
-        this.tooltip.metric.expressionIndex = data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.alias
+        this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
+        this.toolbox.mapping = data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.labels
+        this.toolbox.metric.expressionIndex = data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartGauge.vue b/nezha-fronted/src/components/chart/chart/chartGauge.vue
index 90934d7a1..494e05cb7 100644
--- a/nezha-fronted/src/components/chart/chart/chartGauge.vue
+++ b/nezha-fronted/src/components/chart/chart/chartGauge.vue
@@ -18,19 +18,19 @@
         {{item.alias}}
       </div>
     </div>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div>
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
         <div>
-          <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
-            <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
           </div>
-          <div style="display: inline-block">{{tooltip.value}}</div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
         </div>
       </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -242,12 +242,6 @@ export default {
         myChart.setOption(option)
         if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
           myChart.on('click', this.chartClick)
-          myChart.on('mousedown', (params) => {
-            if (this.tooltip.dataLinkShow) {
-              const e = params.event.event
-              e.stopPropagation()
-            }
-          })
         }
         this.chartInstances.push(myChart)
       })
@@ -284,60 +278,47 @@ export default {
               </div>
                `
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['chart-gauge-box' + this.chartInfo.id].getBoundingClientRect().left
         const top = e.pageY - this.$refs['chart-gauge-box' + this.chartInfo.id].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (params) {
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:hidden;transition:none;'
-        }
-      }
       this.chartInstances.forEach(item => {
-        item.setOption(option)
+        item.dispatchAction({
+          type: 'hideTip'
+        })
       })
-      this.tooltip.title = params.data.alias
-      this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
-      this.tooltip.mapping = params.data.mapping
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.metric.labels = params.data.label
-      this.tooltip.metric.expressionIndex = params.data.expressionIndex
+      this.toolbox.title = params.data.alias
+      this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
+      this.toolbox.mapping = params.data.mapping
+      this.toolbox.show = true
+      this.toolbox.metric.labels = params.data.label
+      this.toolbox.metric.expressionIndex = params.data.expressionIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
-        const option = {
-          tooltip: {
-            extraCssText: 'z-index:99999999;visibility:visible;'
-          }
-        }
-        this.chartInstances.forEach(item => {
-          item.setOption(option)
-        })
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
index 2a352cf19..e5b40405d 100644
--- a/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
+++ b/nezha-fronted/src/components/chart/chart/chartHexagonD3.vue
@@ -1,7 +1,8 @@
 <template>
   <div :ref="`chart-canvas-${chartId}`" style="height: 100%;width: 100%;position: relative;">
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas chart-svg" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"></div>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -14,8 +15,23 @@
           <div style="display: inline-block">{{tooltip.value}}</div>
         </div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -190,14 +206,12 @@ export default {
         g.on('mousemove', self.hexagonMove.bind(self, point))
         g.on('mouseleave', self.hexagonOut.bind(self, point))
         g.on('click', self.chartClick.bind(self, point))
-        g.on('mousedown', self.chartMousedown)
         self.drawText(this.svg, vals, point, color, hexaRadius, g) // 文本
         data[i].fcolor = color
       }
       return this.svg.node()
     },
     hexagonOver (that, e) { // 移入六边形
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = that.alias
       this.tooltip.value = that.mapping && that.mapping.display ? this.handleDisplay(that.mapping.display, { ...that.metrics, legend: that.alias, value: that.showValue }) : that.showValue
       this.tooltip.mapping = that.mapping
@@ -205,12 +219,10 @@ export default {
       this.setPosition(e)
     },
     hexagonMove (that, e) { // 六边形内移动
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     hexagonOut () {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -435,7 +447,6 @@ export default {
         this.svg.selectAll('g').on('mouseenter', null)
         this.svg.selectAll('g').on('mouseleave', null)
         this.svg.selectAll('g').on('click', null)
-        this.svg.selectAll('g').on('mousedown', null)
         this.svg.remove()
         this.svg = null
       }
@@ -453,50 +464,45 @@ export default {
         })
       }, 50)
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().left
         const top = e.pageY - this.$refs[`chart-canvas-${this.chartId}`].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (data, e) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.alias
-        this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue
-        this.tooltip.mapping = data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.metrics
-        this.tooltip.metric.expressionIndex = data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.alias
+        this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.metrics, legend: data.alias, value: data.showValue }) : data.showValue
+        this.toolbox.mapping = data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.metrics
+        this.toolbox.metric.expressionIndex = data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartRank.vue b/nezha-fronted/src/components/chart/chart/chartRank.vue
index bb876eb3c..1088ff58c 100644
--- a/nezha-fronted/src/components/chart/chart/chartRank.vue
+++ b/nezha-fronted/src/components/chart/chart/chartRank.vue
@@ -6,8 +6,8 @@
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" style="overflow-y:auto;">
       <svg :id="`rank-svg-${chartId}`" width="100%" style="vertical-align: top;"></svg>
     </div>
-
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -24,8 +24,27 @@
         <div>rank</div>
         <div>{{tooltip.rank+1}}</div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>rank</div>
+        <div>{{toolbox.rank+1}}</div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -177,7 +196,6 @@ export default {
         .on('mousemove', this.rankMove)
         .on('mouseleave', this.rankLeave)
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
       bars.exit().remove()
 
       // 文本标签
@@ -191,7 +209,6 @@ export default {
         .on('mousemove', this.rankMove)
         .on('mouseleave', this.rankLeave)
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
         .html((d) => {
           return this.rankFormatterLabel(d)
         })
@@ -253,7 +270,6 @@ export default {
       }
     },
     rankEnter (e, data) { // 移入
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = data.alias
       this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
       this.tooltip.mapping = data.mapping
@@ -262,12 +278,10 @@ export default {
       this.setPosition(e)
     },
     rankMove (e) { // 移动
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     rankLeave () { // 移出
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -305,60 +319,54 @@ export default {
         this.svg.selectAll('rect').on('mousemove', null)
         this.svg.selectAll('rect').on('mouseleave', null)
         this.svg.selectAll('rect').on('click', null)
-        this.svg.selectAll('rect').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseenter', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
-        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['rank-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['rank-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.alias
-        this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
-        this.tooltip.mapping = data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.labels
-        this.tooltip.metric.expressionIndex = data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.alias
+        this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
+        this.toolbox.mapping = data.mapping
+        this.toolbox.rank = data.rank
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.labels
+        this.toolbox.metric.expressionIndex = data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartRose.vue b/nezha-fronted/src/components/chart/chart/chartRose.vue
index 0373d1b3c..f5541b4e7 100644
--- a/nezha-fronted/src/components/chart/chart/chartRose.vue
+++ b/nezha-fronted/src/components/chart/chart/chartRose.vue
@@ -16,7 +16,8 @@
       @hoverLegendD3="hoverLegendD3"
     ></chart-legend>
 
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -33,8 +34,27 @@
         <div>percent</div>
         <div>{{tooltip.percent}}%</div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>percent</div>
+        <div>{{toolbox.percent}}%</div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -102,16 +122,6 @@ export default {
       chartId: '',
       roseData: [],
       selectData: [],
-      tooltip: {
-        x: 0,
-        y: 0,
-        title: 0,
-        value: 0,
-        percent: 0,
-        mapping: {},
-        show: false,
-        dataLinkShow: false
-      },
       svg: null,
       drawing: false
     }
@@ -263,7 +273,6 @@ export default {
         .on('mousemove', this.roseMove)
         .on('mouseleave', this.roseLeave)
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
         .transition().duration(animate === true ? 600 : 0)
         .attrTween('d', function (d) {
           const i = d3.interpolate({ startAngle: 0, endAngle: 0 }, d)
@@ -289,7 +298,6 @@ export default {
         .on('mousemove', this.roseMove)
         .on('mouseleave', this.roseLeave)
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
         .style('opacity', 0)
         .html((d) => {
           return d.endAngle - d.startAngle > 0.25 ? this.formatterLabel(d) : ''
@@ -350,7 +358,6 @@ export default {
       }
     },
     roseEnter (e, node) { // 移入气泡
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = node.data.alias
       this.tooltip.value = node.data.mapping && node.data.mapping.display ? this.handleDisplay(node.data.mapping.display, { ...node.data.labels, value: node.data.showValue }) : node.data.showValue
       this.tooltip.percent = node.percent
@@ -359,12 +366,10 @@ export default {
       this.setPosition(e)
     },
     roseMove (e) { // 气泡内移动
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     roseLeave () { // 移出气泡
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -424,62 +429,56 @@ export default {
         this.svg.selectAll('path').on('mousemove', null)
         this.svg.selectAll('path').on('mouseleave', null)
         this.svg.selectAll('path').on('click', null)
-        this.svg.selectAll('path').on('mousedown', null)
         this.svg.selectAll('foreignObject').on('mouseover', null)
         this.svg.selectAll('foreignObject').on('mouseout', null)
         this.svg.selectAll('foreignObject').on('mouseenter', null)
         this.svg.selectAll('foreignObject').on('mousemove', null)
         this.svg.selectAll('foreignObject').on('mouseleave', null)
         this.svg.selectAll('foreignObject').on('click', null)
-        this.svg.selectAll('foreignObject').on('mousedown', null)
         this.svg.remove()
         this.svg = null
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['rose-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['rose-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.data.alias
-        this.tooltip.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
-        this.tooltip.mapping = data.data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.data.labels
-        this.tooltip.metric.expressionIndex = data.data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.data.alias
+        this.toolbox.value = data.data.mapping && data.data.mapping.display ? this.handleDisplay(data.data.mapping.display, { ...data.data.labels, value: data.data.showValue }) : data.data.showValue
+        this.toolbox.percent = data.percent
+        this.toolbox.mapping = data.data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.data.labels
+        this.toolbox.metric.expressionIndex = data.data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartSankey.vue b/nezha-fronted/src/components/chart/chart/chartSankey.vue
index 9f8645af8..d46d77527 100644
--- a/nezha-fronted/src/components/chart/chart/chartSankey.vue
+++ b/nezha-fronted/src/components/chart/chart/chartSankey.vue
@@ -7,8 +7,8 @@
     <div :id="`chart-canvas-${chartId}`" class="chart__canvas" :class="{'chart-cursor-default':!(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}">
       <svg :id="`sankey-svg-${chartId}`" width="100%" height="100%"></svg>
     </div>
-
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">
         {{tooltip.title}}
       </div>
@@ -21,8 +21,23 @@
           <div style="display: inline-block">{{tooltip.value}}</div>
         </div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">
+        {{toolbox.title}}
+      </div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -273,7 +288,6 @@ export default {
           hoverNodes.forEach((index) => {
             chart.selectAll('[index=' + index + ']').style('fill-opacity', '1').selectAll('foreignObject').style('opacity', '1')
           })
-          if (this.tooltip.dataLinkShow) { return }
           // 显示悬浮框
           this.tooltip.title = d.source.node + '  ——>  ' + d.target.node
           this.tooltip.value = d.showValue
@@ -282,19 +296,16 @@ export default {
           this.setPosition(e)
         })
         .on('mousemove', (e) => {
-          if (this.tooltip.dataLinkShow) { return }
           this.tooltip.show = true
           this.setPosition(e)
         })
         .on('mouseleave', () => {
           chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5')
           chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1')
-          if (this.tooltip.dataLinkShow) { return }
           // 隐藏悬浮框
           this.tooltip.show = false
         })
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
 
       // 划过节点
       chart.selectAll('.node')
@@ -306,7 +317,6 @@ export default {
             .style('stroke-opacity', '0.8')
             .selectAll('foreignObject')
             .style('opacity', '1')
-          if (this.tooltip.dataLinkShow) { return }
           // 显示悬浮框
           this.tooltip.title = d.node
           this.tooltip.value = d.mapping && d.mapping.display ? this.handleDisplay(d.mapping.display, { ...d.labels, value: d.showValue }) : d.showValue
@@ -315,19 +325,16 @@ export default {
           this.setPosition(e)
         })
         .on('mousemove', (e) => {
-          if (this.tooltip.dataLinkShow) { return }
           this.tooltip.show = true
           this.setPosition(e)
         })
         .on('mouseleave', () => {
           chart.selectAll('.node, path').style('fill-opacity', '1').style('stroke-opacity', '0.5')
           chart.selectAll('.node').selectAll('foreignObject').style('opacity', '1')
-          if (this.tooltip.dataLinkShow) { return }
           // 隐藏悬浮框
           this.tooltip.show = false
         })
         .on('click', this.chartClick)
-        .on('mousedown', this.chartMousedown)
     },
     setPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
@@ -413,60 +420,53 @@ export default {
         this.svg.selectAll('path').on('mousemove', null)
         this.svg.selectAll('path').on('mouseleave', null)
         this.svg.selectAll('path').on('click', null)
-        this.svg.selectAll('path').on('mousedown', null)
         this.svg.selectAll('.node').on('mouseenter', null)
         this.svg.selectAll('.node').on('mousemove', null)
         this.svg.selectAll('.node').on('mouseleave', null)
         this.svg.selectAll('.node').on('click', null)
-        this.svg.selectAll('.node').on('mousedown', null)
         this.svg.selectAll('g').remove()
         this.svg = null
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['sankey-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['sankey-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.node ? data.node : data.source.node + '  ——>  ' + data.target.node
-        this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
-        this.tooltip.mapping = data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.labels
-        this.tooltip.metric.expressionIndex = data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.node ? data.node : data.source.node + '  ——>  ' + data.target.node
+        this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.labels, value: data.showValue }) : data.showValue
+        this.toolbox.mapping = data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.labels
+        this.toolbox.metric.expressionIndex = data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartStat.vue b/nezha-fronted/src/components/chart/chart/chartStat.vue
index 31d6b36f3..a1b6fa02e 100644
--- a/nezha-fronted/src/components/chart/chart/chartStat.vue
+++ b/nezha-fronted/src/components/chart/chart/chartStat.vue
@@ -8,7 +8,6 @@
       @mousemove="statMouseMove"
       @mouseleave="statMouseleave(item)"
       @click="chartClick($event,item)"
-      @mousedown="chartMousedown($event)"
       :class="{
         'only-stat':statData.length===1,
         'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')
@@ -80,7 +79,8 @@
       <!-- sparkline -->
       <div class="sparkline" :id="`chart-canvas-${chartId}-${index}`" v-if="chartInfo.param.sparklineMode && chartInfo.param.sparklineMode !== 'none'"></div>
     </div>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
+    <!-- tooltip -->
+    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show">
       <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
@@ -91,8 +91,21 @@
           <div style="display: inline-block">{{tooltip.value}}</div>
         </div>
       </div>
+    </div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
+      <div class="chart-canvas-tooltip-content">
+        <div>value</div>
+        <div>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
+          </div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
+        </div>
+      </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -426,7 +439,6 @@ export default {
       }, 100)
     },
     statMouseEnter (data, e) {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.title = data.legend
       this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue
       this.tooltip.mapping = data.mapping
@@ -434,12 +446,10 @@ export default {
       this.setPosition(e)
     },
     statMouseMove (e) {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = true
       this.setPosition(e)
     },
     statMouseleave () {
-      if (this.tooltip.dataLinkShow) { return }
       this.tooltip.show = false
     },
     setPosition (e) {
@@ -505,50 +515,45 @@ export default {
       }
       return this.chartInfo.param.comparison && this.chartInfo.param.comparison !== 'none' && item.height > minHeight && item.width > minWidth
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['chart-stat-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['chart-stat-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (e, data) {
       if (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') {
-        this.tooltip.title = data.legend
-        this.tooltip.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue
-        this.tooltip.mapping = data.mapping
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = data.label
-        this.tooltip.metric.expressionIndex = data.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.tooltip.show = false
+
+        this.toolbox.title = data.legend
+        this.toolbox.value = data.mapping && data.mapping.display ? this.handleDisplay(data.mapping.display, { ...data.label, value: data.showValue }) : data.showValue
+        this.toolbox.mapping = data.mapping
+        this.toolbox.show = true
+        this.toolbox.metric.labels = data.label
+        this.toolbox.metric.expressionIndex = data.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartTable.vue b/nezha-fronted/src/components/chart/chart/chartTable.vue
index 1810855ca..40740db9c 100644
--- a/nezha-fronted/src/components/chart/chart/chartTable.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTable.vue
@@ -35,14 +35,13 @@
             :title="showValueMapping(scope.row,col.title, col)"
             :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}"
             @click="chartClick($event,col,scope.row)"
-            @mousedown="chartMousedown($event)"
           >
             <template v-if="scope.row.valueMapping && scope.row.valueMapping[col.title + 'mapping']">
               <i :class="scope.row.valueMapping[col.title + 'mapping'].icon" :style="{color: scope.row.valueMapping[col.title + 'mapping'].color.icon}"></i>
             </template>
             {{showValueMapping(scope.row,col.title, col)}}
           </div>
-          <div v-else class="value-mapping-table"  :title="scope.row.display[col.title + 'display'].display"  :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)" @mousedown="chartMousedown($event)">
+          <div v-else class="value-mapping-table"  :title="scope.row.display[col.title + 'display'].display"  :class="{'chart-cursor-pointer':(dataLink.length || chartInfo.datasource === 'metrics' || chartInfo.datasource === 'logs')}" @click="chartClick($event,col,scope.row)">
             {{scope.row.display[col.title + 'display'].display}}
           </div>
         </template>
@@ -60,14 +59,14 @@
       >
       </el-pagination>
     </div>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div>
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
-        <div>{{tooltip.value}}</div>
+        <div>{{toolbox.value}}</div>
       </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -475,25 +474,25 @@ export default {
         }
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['tabel-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['tabel-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
@@ -507,31 +506,24 @@ export default {
             flattenedObject = { ...row[key] }
           }
         }
-        this.tooltip.title = col.title
+        this.toolbox.title = col.title
         if (row.valueMapping && row.valueMapping[col.title + 'mapping']) {
-          this.tooltip.value = this.showValueMapping(row, col.title, col)
+          this.toolbox.value = this.showValueMapping(row, col.title, col)
         } else {
-          this.tooltip.value = row.display[col.title + 'display'].display
+          this.toolbox.value = row.display[col.title + 'display'].display
         }
-        this.tooltip.show = true
-        this.tooltip.dataLinkShow = true
-        this.tooltip.metric.labels = {
+        this.toolbox.show = true
+        this.toolbox.metric.labels = {
           ...flattenedObject.metric,
           legend: flattenedObject.$legend
         }
-        this.tooltip.metric.expressionIndex = flattenedObject.expressionIndex
-        this.datalinkPosition(e)
-      }
-    },
-    chartMousedown (e) {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        e.stopPropagation()
+        this.toolbox.metric.expressionIndex = flattenedObject.expressionIndex
+        this.toolboxPosition(e)
       }
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
index 769086c56..4846c97d9 100644
--- a/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTimeSeries.vue
@@ -22,10 +22,11 @@
       :series="series"
       :is-fullscreen="isFullscreen"
     ></chart-legend>
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div v-html="tooltip.tooltipHtml"></div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div v-html="toolbox.tooltipHtml"></div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -85,14 +86,13 @@ export default {
       hasRightYAxis: false,
       chartLoading: false,
       cursorDefault: false,
-      tooltip: {
+      toolbox: {
         x: 0,
         y: 0,
         title: 0,
         value: 0,
         mapping: {},
         show: false,
-        dataLinkShow: '',
         metric: {},
         activeIndex: undefined,
         clickIndex: undefined
@@ -277,12 +277,6 @@ export default {
           })
 
           myChart.on('click', this.chartClick)
-          myChart.on('mousedown', (params) => {
-            if (this.tooltip.dataLinkShow) {
-              const e = params.event.event
-              e.stopPropagation()
-            }
-          })
           // 鼠标滑过当前symbol 改变样式
           myChart.on('mousemove', (params) => {
             this.cursorDefault = false
@@ -312,7 +306,7 @@ export default {
                 }
               )
             }
-            this.tooltip.activeIndex = params.seriesIndex
+            this.toolbox.activeIndex = params.seriesIndex
           })
           myChart.on('mouseout', (params) => {
             const option = myChart.getOption()
@@ -327,7 +321,7 @@ export default {
               })
               myChart.setOption({ series })
             }
-            this.tooltip.activeIndex = undefined
+            this.toolbox.activeIndex = undefined
           })
 
           if (!this.isFullscreen) {
@@ -525,7 +519,7 @@ export default {
 
             // 鼠标悬浮 series data symbol 时，tooltip 中相应的legend 高亮显示
             str += `
-            <div class="${(self.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}">
+            <div class="${(self.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}" title="${seriesName}">
               <div class="row__label">
                 <span class="${className}" style="background-color: ${color};color: ${color}"></span>
                 <span>${seriesName}</span>
@@ -626,25 +620,25 @@ export default {
         this.hasRightYAxis = true
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['timeSeries-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['timeSeries-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
@@ -654,17 +648,9 @@ export default {
       if (this.isConnect !== 'none') {
         echarts.disconnect('timeSeriesGroup')
       }
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:hidden;transition:none;',
-          hideDelay: 0
-        }
-      }
-      getChart(this.chartId).setOption(option)
       getChart(this.chartId).dispatchAction({
         type: 'hideTip'
       })
-      // 生成dataLink tooltip
       const nameArr = params.seriesName.split('-')
       if (nameArr.length > 1) {
         nameArr.splice(nameArr.length - 1, 1)
@@ -697,7 +683,7 @@ export default {
         className = 'yAxis-icon nz-icon nz-icon-youzongzhou'
       }
       const color = this.colorList[params.seriesIndex]
-      this.tooltip.tooltipHtml = `
+      this.toolbox.tooltipHtml = `
         <div class="nz-chart__tooltip">
           <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
           <div class="tooltip__row">
@@ -711,33 +697,27 @@ export default {
           </div>
         </div>
         `
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.metric.labels = this.series[params.seriesIndex].labels
-      this.tooltip.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex
-      this.tooltip.clickIndex = params.seriesIndex
+      this.toolbox.show = true
+      this.toolbox.metric.labels = this.series[params.seriesIndex].labels
+      this.toolbox.metric.expressionIndex = this.series[params.seriesIndex].expressionIndex
+      this.toolbox.clickIndex = params.seriesIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
       if (this.isConnect !== 'none') {
         echarts.connect('timeSeriesGroup')
       }
     },
     clickout () {
-      this.tooltip.show = false
-      this.tooltip.dataLinkShow = false
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:visible;'
-        }
+      if (this.toolbox.show) {
+        this.toolbox.show = false
       }
-      getChart(this.chartId).setOption(option)
     },
     showSelectedSeries () {
       if (this.isConnect !== 'none') {
         echarts.disconnect('timeSeriesGroup')
       }
       this.legends.forEach((item, index) => {
-        if (index == this.tooltip.clickIndex) {
+        if (index == this.toolbox.clickIndex) {
           getChart(this.chartId).dispatchAction({
             type: 'legendSelect',
             name: item.name
@@ -749,7 +729,7 @@ export default {
           })
         }
       })
-      this.isGrey = this.isGrey.map((g, i) => i !== this.tooltip.clickIndex)
+      this.isGrey = this.isGrey.map((g, i) => i !== this.toolbox.clickIndex)
       this.$refs.legend.isGrey = this.isGrey
 
       // 点击后 处理Y轴的刻度边的
diff --git a/nezha-fronted/src/components/chart/chart/chartTreemap.vue b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
index aa320052f..39030449e 100644
--- a/nezha-fronted/src/components/chart/chart/chartTreemap.vue
+++ b/nezha-fronted/src/components/chart/chart/chartTreemap.vue
@@ -14,20 +14,20 @@
       :series="series"
       :is-fullscreen="isFullscreen"
     ></chart-legend>
-
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-canvas-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div class="chart-canvas-tooltip-title tooltip-title" :title="tooltip.title">{{tooltip.title}}</div>
+    <!-- toolbox -->
+    <div :id="`chart-toolbox-${chartId}`" class="chart-canvas-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div class="chart-canvas-tooltip-title tooltip-title" :title="toolbox.title">{{toolbox.title}}</div>
       <div class="chart-canvas-tooltip-content">
         <div>value</div>
         <div>
-          <div v-if="tooltip.mapping && tooltip.mapping.icon" style="display: inline-block">
-            <i :class="tooltip.mapping.icon" :style="{color: tooltip.mapping.color.icon}"></i>
+          <div v-if="toolbox.mapping && toolbox.mapping.icon" style="display: inline-block">
+            <i :class="toolbox.mapping.icon" :style="{color: toolbox.mapping.color.icon}"></i>
           </div>
-          <div style="display: inline-block">{{tooltip.value}}</div>
+          <div style="display: inline-block">{{toolbox.value}}</div>
         </div>
       </div>
       <!-- dataLink -->
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+      <div class="chart-dataLink-list">
         <!-- 复制表达式 -->
         <div class="chart-dataLink-item select-series" v-if="chartInfo.datasource==='metrics'||chartInfo.datasource==='logs'" @click="copyExpr">
           <i class="nz-icon nz-icon-override"></i>
@@ -127,12 +127,6 @@ export default {
         this.isInit && setChart(this.chartId, myChart) // 缓存；不使用vue的data是为避免整个chart被监听导致卡顿
         if (this.isInit && (this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs')) {
           myChart.on('click', this.chartClick)
-          myChart.on('mousedown', (params) => {
-            if (this.tooltip.dataLinkShow && params.dataIndex) {
-              const e = params.event.event
-              e.stopPropagation()
-            }
-          })
         }
         this.isInit = false
       }, 200)
@@ -201,57 +195,46 @@ export default {
               </div>
                `
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       const windowWidth = window.innerWidth// 窗口宽度
       const windowHeight = window.innerHeight// 窗口高度
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs['treemap-chart-box'].getBoundingClientRect().left
         const top = e.pageY - this.$refs['treemap-chart-box'].getBoundingClientRect().top
         if (box) {
           const boxWidth = box.offsetWidth
           const boxHeight = box.offsetHeight
           if (e.pageX < (windowWidth / 2)) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 15
+            this.toolbox.x = left + 15
           } else {
-            this.tooltip.x = left - boxWidth - 15
+            this.toolbox.x = left - boxWidth - 15
           }
           if (e.pageY + 50 + boxHeight < windowHeight) { // 说明鼠标上面放不下提示框
-            this.tooltip.y = top + 15
+            this.toolbox.y = top + 15
           } else {
-            this.tooltip.y = top - boxHeight - 10
+            this.toolbox.y = top - boxHeight - 10
           }
         }
       })
     },
     chartClick (params) {
       if (!params.dataIndex) { return } // 点击父节点(空白间隙)
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:99999999;visibility:hidden;transition:none;'
-        }
-      }
-      getChart(this.chartId).setOption(option)
-      this.tooltip.title = params.data.alias
-      this.tooltip.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
-      this.tooltip.mapping = params.data.mapping
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.metric.labels = params.data.labels
-      this.tooltip.metric.expressionIndex = params.data.expressionIndex
+      getChart(this.chartId).dispatchAction({
+        type: 'hideTip'
+      })
+      this.toolbox.title = params.data.alias
+      this.toolbox.value = params.data.mapping && params.data.mapping.display ? this.handleDisplay(params.data.mapping.display, { ...params.data.labels, value: params.data.showValue }) : params.data.showValue
+      this.toolbox.mapping = params.data.mapping
+      this.toolbox.show = true
+      this.toolbox.metric.labels = params.data.labels
+      this.toolbox.metric.expressionIndex = params.data.expressionIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
     },
     clickout () {
-      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.tooltip.dataLinkShow) {
-        this.tooltip.show = false
-        this.tooltip.dataLinkShow = false
-        const option = {
-          tooltip: {
-            extraCssText: 'z-index:99999999;visibility:visible;'
-          }
-        }
-        getChart(this.chartId).setOption(option)
+      if ((this.dataLink.length || this.chartInfo.datasource === 'metrics' || this.chartInfo.datasource === 'logs') && this.toolbox.show) {
+        this.toolbox.show = false
       }
     }
   },
diff --git a/nezha-fronted/src/components/chart/chart/options/chartBar.js b/nezha-fronted/src/components/chart/chart/options/chartBar.js
index 3898e0fcd..64a9553a2 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartBar.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartBar.js
@@ -7,7 +7,8 @@ const chartBarOption = {
     z: 9,
     animation: false,
     appendToBody: true,
-    className: 'chart-bar'
+    className: 'chart-bar',
+    hideDelay: 0
   },
   legend: {
     show: false
diff --git a/nezha-fronted/src/components/chart/chart/options/chartGauge.js b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
index 9089b7c2f..a6ee55528 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartGauge.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartGauge.js
@@ -7,7 +7,8 @@ const chartGaugeOption = {
     z: 9,
     animation: false,
     appendToBody: true,
-    className: 'chart-gauge'
+    className: 'chart-gauge',
+    hideDelay: 0
   },
   legend: {
     show: false
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
index 6435982da..25c7940aa 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTimeSeries.js
@@ -46,7 +46,8 @@ export const chartTimeSeriesLineOption = {
       label: {
         show: false
       }
-    }
+    },
+    hideDelay: 0
   },
   dataZoom: [
     {
diff --git a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
index 10842331a..fa3d72742 100644
--- a/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
+++ b/nezha-fronted/src/components/chart/chart/options/chartTreemap.js
@@ -21,7 +21,8 @@ const chartTreemapOption = {
         formatUtil.encodeHTML(treePath.join('/')) +
         '</div>'
       ].join('')
-    }
+    },
+    hideDelay: 0
   },
   series: [
     {
diff --git a/nezha-fronted/src/components/chart/chartMixin.js b/nezha-fronted/src/components/chart/chartMixin.js
index 39928edea..7386b6a5a 100644
--- a/nezha-fronted/src/components/chart/chartMixin.js
+++ b/nezha-fronted/src/components/chart/chartMixin.js
@@ -31,8 +31,15 @@ export default {
         title: 0,
         value: 0,
         mapping: {},
+        show: false
+      },
+      toolbox: {
+        x: 0,
+        y: 0,
+        title: 0,
+        value: 0,
+        mapping: {},
         show: false,
-        dataLinkShow: '',
         metric: {}
       }
     }
@@ -465,10 +472,10 @@ export default {
     linkClick (data) {
       const url = data.url.replace(/(\{\{.+?\}\})/g, (match) => {
         const label = match.substr(match.indexOf('{{') + 2, match.indexOf('}}') - match.indexOf('{{') - 2)
-        if (this.tooltip.metric.labels[label]) {
-          return this.tooltip.metric.labels[label]
+        if (this.toolbox.metric.labels[label]) {
+          return this.toolbox.metric.labels[label]
         } else {
-          return this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || ''
+          return this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || ''
         }
       })
       if (data.openIn === 'newTab') {
@@ -479,7 +486,7 @@ export default {
       this.clickout()
     },
     copyExpr () {
-      const expr = this.chartInfo.elements[this.tooltip.metric.expressionIndex].expression || ''
+      const expr = this.chartInfo.elements[this.toolbox.metric.expressionIndex].expression || ''
       this.$copyText(expr).then(() => {
         this.$message.success({ message: this.$t('overall.copySuccess') })
         this.clickout()
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chart.vue b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
index 4913de8c8..ce840a534 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chart.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chart.vue
@@ -23,9 +23,9 @@
       </div>
     </div>
 
-    <div :id="`chart-canvas-tooltip-${chartId}`" class="chart-expolre-tooltip no-style-class" :class="{'chart-dataLink-tooltip':tooltip.dataLinkShow}" :style="{left:tooltip.x+'px',top:tooltip.y+'px'}" v-if="tooltip.show" v-clickoutside="clickout">
-      <div v-html="tooltip.tooltipHtml"></div>
-      <div class="chart-dataLink-list" v-if="tooltip.dataLinkShow">
+    <div :id="`chart-toolbox-${chartId}`" class="chart-expolre-tooltip no-style-class chart-toolbox" :style="{left:toolbox.x+'px',top:toolbox.y+'px'}" v-if="toolbox.show" v-clickoutside="clickout">
+      <div v-html="toolbox.tooltipHtml"></div>
+      <div class="chart-dataLink-list">
         <!-- 只有一条数据时显示 -->
         <div class="chart-dataLink-item" v-if="legend.filter(value => value.isGray === false).length==1" @click="showAllSeries">
           <i class="nz-icon nz-icon-a-Showallseries"></i>
@@ -83,14 +83,13 @@ export default {
       chartDot: 2,
       theme: localStorage.getItem(`nz-user-${localStorage.getItem('nz-user-id')}-theme`) || 'light',
       cursorDefault: false,
-      tooltip: {
+      toolbox: {
         x: 0,
         y: 0,
         title: 0,
         value: 0,
         mapping: {},
         show: false,
-        dataLinkShow: '',
         metric: {},
         activeIndex: undefined,
         clickIndex: undefined
@@ -263,12 +262,6 @@ export default {
         })
 
         this.chart.on('click', this.chartClick)
-        this.chart.on('mousedown', (params) => {
-          if (this.tooltip.dataLinkShow) {
-            const e = params.event.event
-            e.stopPropagation()
-          }
-        })
 
         // 鼠标滑过当前symbol 改变样式
         this.chart.on('mousemove', (params) => {
@@ -290,7 +283,7 @@ export default {
               dataIndex: params.dataIndex
             }
           )
-          this.tooltip.activeIndex = params.seriesIndex
+          this.toolbox.activeIndex = params.seriesIndex
         })
         this.chart.on('mouseout', (params) => {
           const option = this.chart.getOption()
@@ -303,7 +296,7 @@ export default {
             })
           })
           this.chart.setOption({ series })
-          this.tooltip.activeIndex = undefined
+          this.toolbox.activeIndex = undefined
         })
       }
 
@@ -549,7 +542,7 @@ export default {
         showFlag = showFlag || item.value[1]
         if (!isNaN(item.value[1] + '')) {
           const val = Number(item.value[1])
-          str += `<div class="${(this.tooltip.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">`
+          str += `<div class="${(this.toolbox.activeIndex == item.seriesIndex) ? 'tooltip__row highlight' : 'tooltip__row'}">`
           str += `<div class="row__label">
                     <span style='display:inline-block;margin-right:5px;border-radius:10px;width:15px;height:5px;background-color: ${item.color};}'></span>
                     <span>${alias || item.seriesName}</span>
@@ -723,9 +716,9 @@ export default {
         oldDot
       }
     },
-    datalinkPosition (e) {
+    toolboxPosition (e) {
       this.$nextTick(() => {
-        const box = document.getElementById(`chart-canvas-tooltip-${this.chartId}`)
+        const box = document.getElementById(`chart-toolbox-${this.chartId}`)
         const left = e.pageX - this.$refs.chartRoom.getBoundingClientRect().left
         const top = e.pageY - this.$refs.chartRoom.getBoundingClientRect().top
         if (box) {
@@ -734,22 +727,15 @@ export default {
           const parent = chartDom.parentElement
           const parClientWidth = parent.clientWidth// 可视宽度
           if ((parClientWidth - left - 20) >= boxWidth) { // 说明鼠标在左边放不下提示框
-            this.tooltip.x = left + 10
+            this.toolbox.x = left + 10
           } else {
-            this.tooltip.x = left - boxWidth
+            this.toolbox.x = left - boxWidth
           }
-          this.tooltip.y = top + 10
+          this.toolbox.y = top + 10
         }
       })
     },
     chartClick (params) {
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:1000;visibility:hidden;transition:none;',
-          hideDelay: 0
-        }
-      }
-      this.chart.setOption(option)
       this.chart.dispatchAction({
         type: 'hideTip'
       })
@@ -770,7 +756,7 @@ export default {
       }
       const val = formatScientificNotation(params.value[1], paramsDot)
       const color = this.colors[params.seriesIndex]
-      this.tooltip.tooltipHtml = `
+      this.toolbox.tooltipHtml = `
         <div class="nz-chart__tooltip">
           <div class="tooltip-title" style="margin-bottom: 5px">${bus.timeFormate(tData)}</div>
           <div class="tooltip__row">
@@ -784,25 +770,17 @@ export default {
           </div>
         </div>
         `
-      this.tooltip.show = true
-      this.tooltip.dataLinkShow = true
-      this.tooltip.clickIndex = params.seriesIndex
+      this.toolbox.show = true
+      this.toolbox.clickIndex = params.seriesIndex
       const e = params.event.event
-      this.datalinkPosition(e)
+      this.toolboxPosition(e)
     },
     clickout () {
-      this.tooltip.show = false
-      this.tooltip.dataLinkShow = false
-      const option = {
-        tooltip: {
-          extraCssText: 'z-index:1000;visibility:visible;'
-        }
-      }
-      this.chart.setOption(option)
+      this.toolbox.show = false
     },
     showSelectedSeries () {
       this.legend.forEach((item, index) => {
-        if (index == this.tooltip.clickIndex) {
+        if (index == this.toolbox.clickIndex) {
           this.chart.dispatchAction({
             type: 'legendSelect',
             name: item.name
@@ -818,7 +796,7 @@ export default {
       this.legend = this.legend.map((item, index) => {
         return {
           ...item,
-          isGray: index !== this.tooltip.clickIndex
+          isGray: index !== this.toolbox.clickIndex
         }
       })
       this.clickout()
diff --git a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
index c43d04b60..de2d120ad 100644
--- a/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
+++ b/nezha-fronted/src/components/page/dashboard/overview/chartConfig.vue
@@ -76,14 +76,15 @@ const commonOption = {
   tooltip: {
     trigger: 'axis',
     confine: false,
-    extraCssText: 'z-index:1000;',
+    extraCssText: 'z-index:99999999;',
     backgroundColor: 'rgba(221,228,237,1)',
     borderColor: 'rgba(221,228,237,1)',
     textStyle: { color: '#000' },
     axisPointer: {
       snap: false,
       animation: false
-    }
+    },
+    hideDelay: 0
     // formatter:null,
     // position:null,
   },