diff --git a/src/components/charts/Tree.vue b/src/components/charts/TreeVisual.vue
similarity index 98%
rename from src/components/charts/Tree.vue
rename to src/components/charts/TreeVisual.vue
index 195877d22..b65b04b4a 100644
--- a/src/components/charts/Tree.vue
+++ b/src/components/charts/TreeVisual.vue
@@ -13,7 +13,7 @@ import { CanvasRenderer } from 'echarts/renderers'
 echarts.use([TooltipComponent, LegendComponent, TreeChart, CanvasRenderer])
 
 @Component
-export default class TreeChartComponent extends Vue {
+export default class TreeVisual extends Vue {
   @Prop({ required: true }) public id!: string
   @Prop({ default: '400px' }) public height!: string
   @Prop({ default: '100%' }) public width!: string
@@ -48,6 +48,7 @@ export default class TreeChartComponent extends Vue {
         trigger: 'item',
         triggerOn: 'mousemove',
         formatter: this.tooltipFormatter,
+        confine: true,
       },
       series: [
         {
diff --git a/src/components/widgets/TreeView.vue b/src/components/widgets/TreeView.vue
index d782c50c6..144f2252b 100644
--- a/src/components/widgets/TreeView.vue
+++ b/src/components/widgets/TreeView.vue
@@ -103,7 +103,7 @@
           <i class="iconfont icon-about"></i>
         </el-tooltip>
       </span>
-      <tree-chart
+      <tree-visual
         v-if="selectedTreeData"
         id="tree-view"
         :data="selectedTreeData"
@@ -121,12 +121,12 @@ import { Getter } from 'vuex-class'
 import { Tree } from 'element-ui'
 import { getAllIDs, isPayloadEmpty } from '@/utils/topicTree'
 import MyDialog from '@/components/MyDialog.vue'
-import TreeChart from '@/components/charts/Tree.vue'
+import TreeVisual from '@/components/charts/TreeVisual.vue'
 
 @Component({
   components: {
     MyDialog,
-    TreeChart,
+    TreeVisual,
   },
 })
 export default class TreeView extends Vue {