diff --git a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
index 7dd2256b41..b9d472b048 100644
--- a/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
+++ b/core/core-frontend/src/views/chart/components/editor/common/ChartTemplateInfo.vue
@@ -1,45 +1,72 @@
 <script lang="tsx" setup>
-import dvUpArrow from '@/assets/svg/dv-up-arrow.svg'
 import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 </script>
 
 <template>
   <div class="view-panel-Mask">
-    <Icon class-name="item-icon" name="dv-up-arrow"><dvUpArrow class="svg-icon item-icon" /></Icon>
-    <div>
-      <el-button style="opacity: 1 !important" type="warning" size="mini" round>
-        <span style="font-weight: bold; opacity: 1">{{
-          t('visualization.template_view_tips')
-        }}</span>
-      </el-button>
-    </div>
+    <el-popover
+      :visible="true"
+      placement="bottom"
+      popper-class="template-popper-tips"
+      :width="256"
+      show-arrow
+    >
+      <div class="template-popper-tips-content">
+        <p class="constant">{{ t('visualization.template_view_tips') }}</p>
+      </div>
+      <template #reference>
+        <div class="view-panel-mask-inner"></div>
+      </template>
+    </el-popover>
   </div>
 </template>
 
 <style lang="less" scoped>
 .view-panel-Mask {
-  display: flex;
-  height: calc(100vh - 148px);
+  height: 100%;
   width: 100%;
-  background-color: rgba(92, 94, 97, 0.7);
+  background-color: rgba(31, 35, 41);
+  opacity: 0.4;
   position: absolute;
-  top: 85px;
-  left: 0px;
+  top: 0;
+  left: 0;
   z-index: 2;
   cursor: not-allowed;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  pointer-events: none;
 }
-
-.item-icon {
-  position: absolute;
-  top: 10px;
-  left: 300px;
-  width: 40px;
-  height: 40px;
-  opacity: 1;
-  color: #ff8800;
+.view-panel-mask-inner {
+  top: 51px;
+  left: 246px;
+  height: 34px;
+  width: 170px;
+  background: white;
+  position: relative;
+  pointer-events: none;
+  border-radius: 5px;
+}
+</style>
+
+<style lang="less">
+.template-popper-tips {
+  z-index: 1000 !important;
+  padding: 24px !important;
+  box-shadow: none !important;
+  border: 0px !important;
+  background: var(--ed-color-primary) !important;
+  .ed-popper__arrow::before {
+    border: 1px solid var(--ed-color-primary) !important;
+    background: var(--ed-color-primary) !important;
+  }
+}
+.template-popper-tips-content {
+  color: rgba(255, 255, 255, 1);
+  .content {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    text-align: left;
+  }
 }
 </style>
diff --git a/core/core-frontend/src/views/chart/components/editor/common/TemplateTips.vue b/core/core-frontend/src/views/chart/components/editor/common/TemplateTips.vue
new file mode 100644
index 0000000000..dd8739ccbe
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/common/TemplateTips.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import dvAi from '@/assets/svg/dv-ai.svg'
+import { onMounted, ref } from 'vue'
+const visible = ref(true)
+const emits = defineEmits(['confirm'])
+
+const confirm = () => {
+  emits('confirm')
+}
+
+onMounted(() => {
+  // do
+})
+</script>
+<template>
+  <el-popover
+    :visible="visible"
+    placement="bottom"
+    popper-class="ai-popper-tips"
+    :width="288"
+    show-arrow
+  >
+    <div class="ai-popper-tips-content">
+      <p class="constant">
+        你好，我是 DataEase 智能客服<br />点击一下，开启高效解答模式~<br />&nbsp;
+      </p>
+    </div>
+    <template #reference>
+      <div class="ai-popper-tips-icon">
+        <el-icon style="margin: 2px" class="ai-icon">
+          <Icon name="dv-ai"><dvAi class="svg-icon" /></Icon>
+        </el-icon>
+      </div>
+    </template>
+  </el-popover>
+</template>
+
+<style lang="less">
+.ai-popper-tips {
+  z-index: 10001 !important;
+  padding: 24px !important;
+  box-shadow: none !important;
+  border: 0px !important;
+  background: var(--ed-color-primary) !important;
+  .ed-popper__arrow::before {
+    border: 1px solid var(--ed-color-primary) !important;
+    background: var(--ed-color-primary) !important;
+  }
+}
+.ai-popper-tips-content {
+  color: rgba(255, 255, 255, 1);
+  .title {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 20px;
+    font-weight: 500;
+    line-height: 28px;
+  }
+  .content {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    text-align: left;
+  }
+  .bottom {
+    line-height: 22px;
+    text-align: right;
+    button {
+      border: 0px !important;
+      border-color: #ffffff !important;
+      font-weight: 500;
+      color: rgba(51, 112, 255, 1) !important;
+    }
+  }
+}
+
+.ai-popper-tips-icon {
+  margin: 0 8px;
+  z-index: 10003;
+  border-radius: 50%;
+  background: #ffffff;
+  width: 28px;
+  height: 28px;
+}
+</style>