diff --git a/nezha-fronted/src/components/common/alert/alertLabel.vue b/nezha-fronted/src/components/common/alert/alertLabel.vue
new file mode 100644
index 000000000..74d4f99cf
--- /dev/null
+++ b/nezha-fronted/src/components/common/alert/alertLabel.vue
@@ -0,0 +1,137 @@
+<template>
+  <span v-loading="loading">
+    <div class="alertLabelInfo" v-if="type==='asset'">
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">ID</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
+    </div>
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">SN</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.sn:''}}</div>
+    </div>
+  </div>
+  <div class="alertLabelInfo" v-if="type==='module'">
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">ID</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
+    </div>
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">Name</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.name:''}}</div>
+    </div>
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">Project</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.project.name:''}}</div>
+    </div>
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">Description</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.remark:''}}</div>
+    </div>
+  </div>
+  <div class="alertLabelInfo" v-if="type==='project'">
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">ID</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.id:''}}</div>
+    </div>
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">Name</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.name:''}}</div>
+    </div>
+    <div class="alertLabelBox">
+      <div class="alertLabelTitle">Description</div>
+      <div class="alertLabelValue">{{alertLabelData?alertLabelData.remark:''}}</div>
+    </div>
+  </div>
+  </span>
+</template>
+
+<script>
+  export default {
+    name:"alertLabel",
+    props:{
+      id:{},
+      severityData:{
+        type:Array
+      },
+      type:{},
+      labelLoading:{}
+    },
+    watch:{
+      labelLoading(){
+        if(this.type==='asset'){
+          this.$get('/asset?id='+this.id).then((res)=>{
+            if(res.msg==='success'){
+              this.loading=false;
+              this.alertLabelData=res.data.list[0];
+            } else{
+              this.$message.error(res.msg);
+            }
+          })
+        }
+        if(this.type==='project'){
+          this.$get('/project?id='+this.id).then((res)=>{
+            if(res.msg==='success'){
+              this.loading=false;
+              this.alertLabelData=res.data.list[0];
+            } else{
+              this.$message.error(res.msg);
+            }
+          })
+        }
+        if(this.type==='module'){
+          this.$get('/module?id='+this.id).then((res)=>{
+            if(res.msg==='success'){
+              this.loading=false;
+              this.alertLabelData=res.data.list[0];
+            } else{
+              this.$message.error(res.msg);
+            }
+          })
+        }
+      }
+    },
+    data() {
+      return {
+        alertLabelData:null,
+        loading:module
+      }
+    },
+    components:{
+
+    },
+
+    methods:{
+
+    },
+    mounted(){
+    },
+  }
+
+</script>
+
+<style scoped>
+  .alertLabelInfo{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alertLabelBox{
+    display: flex;
+    justify-content:space-between;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .alertLabelTitle{
+    text-align: left;
+    width: 80px;
+    border-right: 1px solid #ebeef5;
+    color: #666;
+    padding: 0 3px 0 13px;
+  }
+  .alertLabelValue{
+    text-align: left;
+    width: 150px;
+    color: #1a1a1a;
+    padding: 0 3px 0 13px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/common/alert/alertRuleInfo.vue b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
new file mode 100644
index 000000000..0f42c26d1
--- /dev/null
+++ b/nezha-fronted/src/components/common/alert/alertRuleInfo.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="alertRuleInfo" v-loading="loading">
+    <div class="alertRuleBox">
+      <div class="alertRuleTitle">ID</div>
+      <div class="alertRuleValue">{{alertRuleData?alertRuleData.id:''}}</div>
+    </div>
+    <!--<div class="alertRuleBox">-->
+      <!--<div class="alertRuleTitle">ID</div>-->
+      <!--<div class="alertRuleValue">{{alertRuleData.id}}</div>-->
+    <!--</div>-->
+    <div class="alertRuleBox">
+      <div class="alertRuleTitle">Expression</div>
+      <div class="alertRuleValue">{{alertRuleData?(alertRuleData.expr + alertRuleData.operator + formatThreshold(alertRuleData.threshold,alertRuleData.unit)):''}}</div>
+    </div>
+    <div class="alertRuleBox">
+      <div class="alertRuleTitle">Level</div>
+      <div class="alertRuleValue">
+        <span v-if="alertRuleData && alertRuleData.severity === 'high'"><i class="el-icon-arrow-up"></i>&nbsp;{{severityData[1].value}}</span>
+        <span style="padding-left: 18px;" v-if="alertRuleData && alertRuleData.severity === 'medium'">{{severityData[0].value}}</span>
+        <span v-if="alertRuleData && alertRuleData.severity === 'low'"><i class="el-icon-arrow-down"></i>&nbsp;{{severityData[2].value}}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import chartDataFormat from '../../charts/chartDataFormat'
+	export default {
+		name:"alertRuleInfo",
+    props:{
+		  id:{},
+      severityData:{
+        type:Array
+      },
+      messageLoad:{},
+    },
+    watch:{
+      messageLoad:{
+        handler:function(){
+          this.$get('/alert/rule?id='+this.id).then((res)=>{
+            if(res.msg==='success'){
+              this.loading=false;
+              this.alertRuleData=res.data.list[0];
+            } else{
+              this.$message.error(res.msg);
+            }
+          })
+        },
+        deep:true
+      }
+    },
+    data() {
+		  return {
+		    loading:true,
+        alertRuleData:''
+      }
+    },
+    components:{
+
+    },
+
+    methods:{
+      formatThreshold(value,unit) {
+        let unitMethod = chartDataFormat.getUnit(unit);
+        if (unitMethod&&value) {
+          return unitMethod.compute(value, null, 2);
+        } else {
+          return value
+        }
+      },
+    },
+    mounted(){
+
+    },
+	}
+
+</script>
+
+<style scoped>
+  .alertRuleInfo{
+    border: 1px solid #ebeef5;
+    border-bottom: none;
+    font-size: 13px;
+    line-height: 26px;
+  }
+  .alertRuleBox{
+    display: flex;
+    justify-content:space-between;
+    border-bottom: 1px solid #ebeef5;
+  }
+  .alertRuleTitle{
+    text-align: left;
+    width: 80px;
+    border-right: 1px solid #ebeef5;
+    color: #666;
+    padding: 0 3px 0 13px;
+  }
+  .alertRuleValue{
+    text-align: left;
+    width: 180px;
+    color: #1a1a1a;
+    padding: 0 3px 0 13px;
+  }
+</style>
diff --git a/nezha-fronted/src/components/page/alert/config.vue b/nezha-fronted/src/components/page/alert/config.vue
index a7b878c6d..dbbc0d021 100644
--- a/nezha-fronted/src/components/page/alert/config.vue
+++ b/nezha-fronted/src/components/page/alert/config.vue
@@ -55,6 +55,7 @@
             min-width="110px"
             :sortable="sortableShow(item.prop)"
             :prop="propTitle(item.prop)"
+            :sort-orders="['ascending', 'descending']"
           >
             <template slot-scope="scope" :column="item">
               <div v-if="item.prop == 'option'" class="content-right-options">
diff --git a/nezha-fronted/src/components/page/alert/list.vue b/nezha-fronted/src/components/page/alert/list.vue
index 33796f2b6..12164a502 100644
--- a/nezha-fronted/src/components/page/alert/list.vue
+++ b/nezha-fronted/src/components/page/alert/list.vue
@@ -2,6 +2,9 @@
   .list {
     height: 100%;
   }
+  .too-long-split{
+    cursor: pointer;
+  }
 </style>
 <style lang="scss">
   @import '../../charts/chart';
@@ -50,7 +53,8 @@
           :cell-class-name="labelsClassName"
           @selection-change="selectChange"
           style="width: 100%;"
-          @sort-change="tableDataSort">
+          @sort-change="tableDataSort"
+        >
           <el-table-column
             :resizable="false"
             type="selection"
@@ -63,19 +67,26 @@
             v-for="(item, index) in tablelable"
             v-if="item.show"
             :width="item.width"
+            :minWidth="item.minWidth"
             :key="`col-${index}`"
             :label="item.label"
             :show-overflow-tooltip="item.prop != 'labels'"
             min-width="110px"
             :sortable="sortableShow(item.prop)"
             :prop="propTitle(item.prop)"
+            :sort-orders="['ascending', 'descending']"
           >
             <template slot-scope="scope" :column="item">
               <template v-if="item.prop == 'alertRule'">
                 <!--<div class="link too-long-split"
                    @click="viewRule(scope.row[item.prop].id)" :id="'view-rule-'+scope.row[item.prop].id"
                    v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</div>-->
-                <span class="too-long-split"v-if="scope.row[item.prop].alertName">{{scope.row[item.prop].alertName}}</span>
+                  <span class="too-long-split" v-if="scope.row[item.prop].alertName" @mouseover="alertMessagehover(scope.row,scope.$index)">
+                    <el-tooltip placement="right" effect="light">
+                      <alertRuleInfo slot="content" :id="scope.row.alertRule.id" :severityData="severityData" :messageLoad="scope.row.loading"></alertRuleInfo>
+                      <span>{{scope.row[item.prop].alertName}}</span>
+                    </el-tooltip>
+                  </span>
                 <template v-else>-</template>
               </template>
               <!--<div v-else-if="item.prop == 'type'" class="content-right-options">
@@ -107,11 +118,31 @@
               </div>-->
               <template v-else-if="item.prop == 'labels'">
 <!--                <nz-alert-tag :label="key" :type="tagType(key)" style="margin: 5px;" @click="showTagDetail(scope.row, key)"-->
-                <nz-alert-tag :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
-                              :cursor-point="tagType(item.label) == 'info' ? false : true"
-                              :key="item.label"
-                              v-if="item.label != 'alertname' && item.label != 'severity'"
-                              v-for="item in labelsSort(scope.row.labels)">{{item.value}}</nz-alert-tag>
+                  <el-tooltip
+                    v-for="item in labelsSort(scope.row.labels)"
+                    placement="right"
+                    effect="light"
+                    :disabled="labelToolTipDis(item.label)"
+                    :key="item.label"
+                  >
+                  <alertLabel
+                    v-if="!labelToolTipDis(item.label)"
+                    slot="content"
+                    :id="scope.row[item.label].id"
+                    :type="item.label"
+                    :labelLoading="scope.row[item.label].loading"
+                  ></alertLabel>
+                   <span @mouseover="labelHover(scope.row,scope.$index,item.label)">
+                     <nz-alert-tag
+                       :label="item.label" :type="tagType(item.label)" style="margin: 5px;"
+                       :cursor-point="tagType(item.label) == 'info' ? false : true"
+                       :key="item.label"
+                       v-if="item.label != 'alertname' && item.label != 'severity'"
+                     >
+                       {{item.value}}
+                     </nz-alert-tag>
+                   </span>
+                </el-tooltip>
                 <!--<el-tag @click="showTagDetail(scope.row, key)"
                         :key="key"
                         :class="{'link': key == 'asset' || key == 'endpoint' || key == 'project' || key == 'module' || key == 'datacenter'}"
@@ -228,13 +259,16 @@
   import nzAlertTag from './nzAlertTag';
   import chart from '../../page/dashboard/overview/chart'
   import chartDataFormat from "../../charts/chartDataFormat";
-
+  import alertRuleInfo from '../../common/alert/alertRuleInfo'
+  import alertLabel from '../../common/alert/alertLabel'
   var vm;
   export default {
     name: "alertList",
     components: {
       'nz-alert-tag': nzAlertTag,
-      'chart': chart
+      'chart': chart,
+      'alertRuleInfo':alertRuleInfo,
+      'alertLabel':alertLabel,
     },
     data() {
       vm = this;
@@ -289,20 +323,20 @@
             label: this.$t("alert.list.labels"),
             prop: 'labels',
             show: true,
-            width: 200
+            width:250,
           }, {
             label: this.$t("alert.severity"),
             prop: 'severity',
             show: true,
-            width: 100
+            width: 100,
           }, {
             label: this.$t('alert.summary'),
             prop: 'summary',
-            show: true
+            show: true,
           }, {
             label: this.$t('alert.description'),
             prop: 'description',
-            show: true
+            show: true,
           }, {
             label: this.$t('alert.list.state'),
             prop: 'state',
@@ -312,14 +346,17 @@
             label: this.$t("alert.startAt"),
             prop: 'startAt',
             show: true,
+            width: 150
           }, {
             label: this.$t('alert.endAt'),
             prop: 'endAt',
             show: true,
+            width: 150
           }, {
             label: this.$t('overall.value'),
             prop: 'current',
-            show: true
+            show: true,
+            width: 100
           }, {
             label: this.$t('overall.option'),
             prop: 'option',
@@ -958,6 +995,29 @@
         this.pageObj.orderBy=orderBy;
         this.$set(this.searchLabel, "orderBy", orderBy);
         this.getAlertList();
+      },
+      // label tooltip是否显示
+      labelToolTipDis(labelType){
+        switch(labelType){
+          case 'asset':
+          case 'module':
+          case 'project':
+            return false;
+          default: return true;
+        }
+      },
+      // alertNmae鼠标划入
+      alertMessagehover(item,index){
+        item.loading=true;
+        this.$set(this.tableData,index,item);
+      },
+      // label 鼠标划入
+      labelHover(item,index,type){
+        if(this.labelToolTipDis(type)){
+          return
+        }
+        item[type].loading=true;
+        this.$set(this.tableData,index,item);
       }
     },
     watch: {
diff --git a/nezha-fronted/src/components/page/alert/nzAlertTag.vue b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
index 3e744b85d..052913dc6 100644
--- a/nezha-fronted/src/components/page/alert/nzAlertTag.vue
+++ b/nezha-fronted/src/components/page/alert/nzAlertTag.vue
@@ -1,8 +1,8 @@
 <template>
- <span class="nz-alert-tag" :class="['nz-alert-tag_' + type]" :style="{cursor: cursorPoint ? 'pointer' : 'default'}" @click="$emit('click')">
+  <span class="nz-alert-tag" :class="['nz-alert-tag_' + type]" :style="{cursor: cursorPoint ? 'pointer' : 'default'}" @click="$emit('click')">
    <span class="nz-alert-tag__label">{{label}}</span>
    <span class="nz-alert-tag__content"><slot></slot></span>
- </span>
+  </span>
 </template>
 
 <script>