diff --git a/nezha-fronted/src/assets/css/common.scss b/nezha-fronted/src/assets/css/common.scss
index 3f2f134a7..f92d13c3c 100644
--- a/nezha-fronted/src/assets/css/common.scss
+++ b/nezha-fronted/src/assets/css/common.scss
@@ -670,3 +670,8 @@ textarea {
 .el-message__content{
   white-space:pre-line
 }
+.response__popper {
+  max-height: 500px;
+  overflow: hidden;
+  overflow-y: auto;
+}
diff --git a/nezha-fronted/src/components/common/alert/nzTooltip.vue b/nezha-fronted/src/components/common/alert/nzTooltip.vue
index 6f299dab1..b4f875e41 100644
--- a/nezha-fronted/src/components/common/alert/nzTooltip.vue
+++ b/nezha-fronted/src/components/common/alert/nzTooltip.vue
@@ -1,7 +1,11 @@
 <template>
-  <div style="padding:15px" :class="calcHeight(that.position,that)" :style="calcPosition(that.position,that)" class="alert-label__border" ref="alertLabels"
-       @mouseenter="tooltipHover(true)"
-       @mouseleave="tooltipHover(false)">
+  <div style="padding:15px"
+       :class="calcHeight(that.position,that)"
+       :style="calcPosition(that.position,that)"
+       class="alert-label__border response__popper"
+       ref="alertLabels"
+       @mouseenter="tipHover(true)"
+       @mouseleave="tipHover(false)">
     <slot name="default"/>
   </div>
 </template>
@@ -16,7 +20,11 @@ export default {
     that: {},
     detailList: Boolean,
     alertTableDialog: Boolean,
-    isTopoInfo: Boolean
+    isTopoInfo: Boolean,
+    width: {
+      type: Number,
+      default: 150
+    }
   },
   data () {
     return {
@@ -28,31 +36,62 @@ export default {
   computed: {
     calcPosition () {
       return function (position) {
-        const clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
-        const leftOffSetView = this.detailList ? -80 : 10
-        const leftOffSet = this.detailList ? -80 : 10
-        const topOffSet = this.detailList ? 60 : 22
-        const topoOffset = this.isTopoInfo ? 155 : 0
-        if (position.top + this.heightList > clientHeight) {
-          return {
-            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
-            top: `${position.top - this.heightList + topOffSet}px`
+        if (this.$refs.alertLabels) {
+          this.heightList = this.$refs.alertLabels.getBoundingClientRect().height
+          this.boxWidth = this.$refs.alertLabels.getBoundingClientRect().width
+        } else {
+          this.heightList = 0
+          this.boxWidth = 0
+        }
+        const clientHeight =
+          document.body.clientHeight < document.documentElement.clientHeight
+            ? document.body.clientHeight
+            : document.documentElement.clientHeight
+        const clientWidth =
+          document.body.clientWidth < document.documentElement.clientWidth
+            ? document.body.clientWidth
+            : document.documentElement.clientWidth
+        let leftOffSetView = 0
+        let leftOffSet = this.detailList ? -80 : 10
+        let topOffSet = this.detailList ? 60 : 22
+        let topOffSetView = 0
+        let labelPosition = {
+          top: 0,
+          left: 0,
+          right: 0,
+        }
+        if (this.alertTableDialog) {
+          let dialog = document.querySelector(
+            '#dialog-alert-massage .el-dialog'
+          )
+          if (!dialog) {
+            dialog = document.querySelector('#viewGraphDialog .el-dialog')
           }
-        } else if (this.alertTableDialog) {
-          const dialog = document.querySelector('#dialog-alert-massage .el-dialog')
           const dialogHeight = dialog.getBoundingClientRect()
-          if (dialogHeight) {
-            return {
-              left: `${position.left + position.width + 10 - dialogHeight.x}px`,
-              top: `${position.top - dialogHeight.y}px`
-            }
+          leftOffSet = leftOffSet - 3 * dialogHeight.x
+          leftOffSetView = dialogHeight.x
+          topOffSet = topOffSet - dialogHeight.y
+          topOffSetView = topOffSet
+        }
+        if (position.top > clientHeight / 2) {
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: this.that.type === 'chartTopology' ? `${position.top - this.heightList - topOffSetView}px` : `${position.top - this.heightList - topOffSetView + position.height / 2}px`
           }
         } else {
-          return {
-            left: `${position.left + position.width + leftOffSet - topoOffset}px`,
-            top: `${position.top}px`
+          labelPosition = {
+            left: `${position.left + position.width + leftOffSet}px`,
+            top: this.that.type === 'chartTopology' ? `${position.top + topOffSet}px` : `${position.top + position.height / 2}px`
           }
         }
+        if (position.left > clientWidth / 2) {
+          delete labelPosition.left
+
+          labelPosition.right =
+            clientWidth - position.left - leftOffSetView + 'px'
+        }
+        labelPosition.width = this.width + 'px'
+        return labelPosition
       }
     },
     calcHeight () {
@@ -69,13 +108,23 @@ export default {
     }
   },
   methods: {
-    tooltipHover (show) {
-      if (show) {
-        clearTimeout(this.that.timeout)
-        this.that.timeout = null
-      } else {
-        this.that.loading = false
+    tooltipHover (item, flag, e) {
+      if (e) {
+        const dom = e.currentTarget
+        const position = dom.getBoundingClientRect()
+        this.position.left = position.left
+        this.$set(this.position, 'left', position.left)
+        if (position.top > window.innerHeight / 2) {
+          this.$set(this.position, 'top', position.top - 55)
+        } else {
+          this.$set(this.position, 'top', position.top + 30)
+        }
+        // this.$set(item, 'alertNumtooltipShow', flag)
+        this.alertNumtooltipShow = flag
       }
+    },
+    tipHover (tipLoading) {
+      this.$emit('tipHover', tipLoading)
     }
   },
   mounted () {
diff --git a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
index 73a46d1ef..f89311fff 100644
--- a/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
+++ b/nezha-fronted/src/components/common/mixin/alertLabelMixin.js
@@ -62,6 +62,8 @@ export default {
         case 'dc':
         case 'user':
         case 'recordRule':
+        case 'response':
+        case 'params':
           return false
         default: return true
       }
diff --git a/nezha-fronted/src/components/common/mixin/table.js b/nezha-fronted/src/components/common/mixin/table.js
index 92337c906..2fa3427cc 100644
--- a/nezha-fronted/src/components/common/mixin/table.js
+++ b/nezha-fronted/src/components/common/mixin/table.js
@@ -1,8 +1,9 @@
 import alertDaysInfo from '@/components/common/alert/alertDaysInfo'
-import { requestsArr } from '@/http'
+import nzTooltip from '@/components/common/alert/nzTooltip'
 export default {
   components: {
-    alertDaysInfo
+    alertDaysInfo,
+    nzTooltip
   },
   props: {
     tableData: {
diff --git a/nezha-fronted/src/components/common/table/settings/operationLogTable.vue b/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
index a45c5b8b4..c6af0539c 100644
--- a/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
+++ b/nezha-fronted/src/components/common/table/settings/operationLogTable.vue
@@ -1,68 +1,94 @@
 <template>
-  <el-table
-    id="roleTable"
-    ref="dataTable"
-    :data="tableData"
-    :height="height"
-    border
-    :default-sort="orderBy"
-    class="no-operation"
-    @header-dragend="dragend"
-    @sort-change="tableDataSort"
-    @selection-change="selectionChange"
-  >
-    <el-table-column
-      :resizable="false"
-      align="center"
-      type="selection"
-      width="55">
-    </el-table-column>
-    <el-table-column
-      v-for="(item, index) in customTableTitle"
-      v-if="item.show"
-      :key="`col-${index}`"
-      :fixed="item.fixed"
-      :label="item.label"
-      :min-width="`${item.minWidth}`"
-      :prop="item.prop"
-      :resizable="true"
-      :sortable="item.sortable"
-      :sort-orders="['ascending', 'descending']"
-      :width="`${item.width}`"
-      class="data-column"
-      :show-overflow-tooltip="item.ShowOverflowTooltip"
+  <div style="height: 100%">
+    <el-table
+      id="roleTable"
+      ref="dataTable"
+      :data="tableData"
+      :height="height"
+      border
+      :default-sort="orderBy"
+      class="no-operation"
+      @header-dragend="dragend"
+      @sort-change="tableDataSort"
+      @selection-change="selectionChange"
     >
-      <template slot="header">
-        <span class="data-column__span">{{item.label}}</span>
-        <div class="col-resize-area"></div>
-      </template>
-      <template slot-scope="scope" :column="item">
+      <el-table-column
+        :resizable="false"
+        align="center"
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        v-for="(item, index) in customTableTitle"
+        v-if="item.show"
+        :key="`col-${index}`"
+        :fixed="item.fixed"
+        :label="item.label"
+        :min-width="`${item.minWidth}`"
+        :prop="item.prop"
+        :resizable="true"
+        :sortable="item.sortable"
+        :sort-orders="['ascending', 'descending']"
+        :width="`${item.width}`"
+        class="data-column"
+      >
+        <template slot="header">
+          <span class="data-column__span">{{item.label}}</span>
+          <div class="col-resize-area"></div>
+        </template>
+        <template slot-scope="scope" :column="item">
         <span v-if="item.prop === 'time'">
                 {{scope.row[item.prop]}} ms
               </span>
-        <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
-        <span v-else-if="item.prop === 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
-        <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
-        <span v-else>-</span>
+          <span v-else-if="item.prop === 'username'">{{formatUsername(scope.row)}}</span>
+          <span v-else-if="item.prop === 'createDate'">{{utcTimeToTimezoneStr(scope.row[item.prop])}}</span>
+          <span v-else-if="item.prop === 'response'"  @mouseenter="labelHover(scope.row, 'response', true, false, $event)"
+                @mouseleave="labelHover(scope.row, 'response', false, false)">
+          <div class="text-ellipsis" style="width: 100%" >
+            {{scope.row[item.prop]}}
+          </div>
+        </span>
+          <span v-else-if="item.prop === 'params'"  @mouseenter="labelHover(scope.row, 'params', true, false, $event)"
+                @mouseleave="labelHover(scope.row, 'params', false, false)">
+          <div class="text-ellipsis" style="width: 100%" >
+            {{scope.row[item.prop]}}
+          </div>
+        </span>
+          <span v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</span>
+          <span v-else>-</span>
+        </template>
+      </el-table-column>
+      <template slot="empty">
+        <div v-if="!loading" class="table-no-data">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#nz-icon-no-data-list"></use>
+          </svg>
+          <div class="table-no-data__title">No results found</div>
+        </div>
+        <div v-else>&nbsp;</div>
       </template>
-    </el-table-column>
-    <template slot="empty">
-      <div v-if="!loading" class="table-no-data">
-        <svg class="icon" aria-hidden="true">
-          <use xlink:href="#nz-icon-no-data-list"></use>
-        </svg>
-        <div class="table-no-data__title">No results found</div>
+    </el-table>
+    <nzTooltip
+      v-if="alertLabelShow"
+      :id="alertLabelId"
+      :that="alertLabelObj"
+      :width="200"
+      :type="alertLabelType"
+      @tipHover='tipHover'
+    >
+      <div style="word-break: break-all">
+        {{alertLabelObj[alertLabelType]}}
       </div>
-      <div v-else>&nbsp;</div>
-    </template>
-  </el-table>
+    </nzTooltip>
+  </div>
 </template>
 
 <script>
 import table from '@/components/common/mixin/table'
+import alertLabelMixin from '@/components/common/mixin/alertLabelMixin'
 export default {
   name: 'operationLog',
-  mixins: [table],
+  mixins: [table, alertLabelMixin],
   props: {
     loading: Boolean
   },
@@ -136,7 +162,7 @@ export default {
           prop: 'params',
           show: false,
           ShowOverflowTooltip: true,
-          minWidth: 80
+          minWidth: 100
         },
         {
           label: this.$t('config.operationlog.response'),