diff --git a/nezha-fronted/src/components/charts/chart-asset-info.scss b/nezha-fronted/src/components/charts/chart-asset-info.scss
deleted file mode 100644
index 86470f567..000000000
--- a/nezha-fronted/src/components/charts/chart-asset-info.scss
+++ /dev/null
@@ -1,228 +0,0 @@
-/* ---------edit-chart-move--------- */
-.clearfix:after{
-  display: block;
-  content: "";
-  clear: both;
-}
-.clearfix{
-  margin-bottom: 10px;
-}
-.loading-font{
-  color:#232f3e !important;
-}
-.dialog-tool {
-  margin-right: 40px;
-}
-.hidden{
-  visibility: hidden;
-}
-.visible{
-  visibility: visible;
-}
-
-.chart-asset-info {
-  width: 100%;
-  height: 100%;//calc(100% - 40px);
-  position: relative;
-  background: #FFF;
-  border: 1px solid #d8dce1;
-  padding: 0px 0px;
-  margin-bottom: 10px;
-  padding-bottom: 3px;
-  .chart-info-container{
-    padding-left: 8px;
-    padding-right: 8px;
-    text-align:center;
-    width:calc(100% - 16px);
-    .single-stat-content{
-      text-align:center;
-      vertical-align: middle;
-      display:table-cell;
-      font-size:30px;
-    }
-  }
-  .vue-resizable-handle {
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    bottom: 0;
-    right: 0;
-    cursor: se-resize;
-    box-sizing: border-box;
-  }
-  .vue-resizable-handle:after {
-    border-right: 2px solid #555;
-    border-bottom: 2px solid #555;
-    content: "";
-    position: absolute;
-    right: 3px;
-    bottom: 3px;
-    width: 5px;
-    height: 5px;
-    box-sizing: inherit;
-  }
-  .chartTitle:hover {
-    background-color:#d8dce1;
-  }
-  .dragTitle{
-    background-color:#d8dce1;
-  }
-  .chartTitle {
-    text-align: center;
-    width: 100%;
-    line-height: 28px;
-    .nz-chart-top{
-      width:100%;
-    }
-    .el-dropdown-link {
-      cursor: move;
-    }
-    .el-icon-arrow-down {
-      font-size: 12px;
-    }
-    .chart-title {
-      font-weight: bold;
-      font-size: 18px;
-      line-height: 26px;
-      color: #333;
-      margin: -3px 0 3px 3px;
-      display:flex;
-      justify-content:center;
-      align-items:center;
-      .chart-title-text{
-        max-width:calc(100% - 20px);
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-        cursor: pointer;
-      }
-      .chart-title-icon{
-        display: inline-block;
-        cursor: pointer;
-      }
-    }
-  }
-  .edit:after{
-    display: block;
-    content: "";
-    clear: both;
-  }
-
-  .button-panel-height{
-    height:26px;
-  }
-  .button-panel-height button{
-    height:26px;
-  }
-  .edit {
-    position: absolute;
-    right: 20px;
-    top: 17px;
-    z-index: 10;
-
-  }
-  .chart-select {
-    position: absolute;
-    left: 40px;
-    top: 25px;
-    z-index: 10;
-    font-size: 14px;
-    .chart-select-btn {
-      margin-right: 10px;
-      cursor: pointer;
-      &.active {
-        color: #5aacff;
-      }
-    }
-  }
-  /*没有数据显示*/
-  .null {
-    position: absolute;
-    top: 50%;
-    width: 100%;
-    text-align: center;
-    font-size: 24px;
-    font-weight: 600;
-  }
-  .element-bottom-border {
-    border-bottom: 1px solid #dfe7f2;
-    margin-bottom:-20px;
-  }
-  .element-top-border {
-    padding-top: 10px;
-    border-top: 1px solid #dfe7f2;
-    margin-top:-25px;
-  }
-}
-
-.asset-info-content{
-  width: 100%;
-  height: 100%;
-  font-size: 12px;
-  .basic-container,.feature-container{
-    width: 100%;
-    //height: calc(50% - 4px);
-    box-sizing: border-box;
-  }
-  .basic-container .basic-title,.feature-container .feature-title{
-    height: 20px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap:nowrap;
-    padding: 0 5px 0 5px;
-    box-sizing: border-box;
-    font-size: 16px;
-  }
-  .basic-container .basic-title:hover,.feature-container .feature-title:hover{
-    border: 1px solid #C0C4CC;
-  }
-
-  .basic-container .basic-content,.feature-container .feature-content{
-    height: calc(100% - 22px);
-    transition: all 2s;
-  }
-  .shrink{
-    height: 0px;
-    display: none;
-  }
-  .basic-container{
-    margin-bottom: 10px;
-  }
-  .feature-container{
-
-  }
-  .content-item{
-    width: 100%;
-    min-height: 20px;
-    padding: 2px;
-    overflow:hidden;
-    text-overflow:ellipsis;
-    position: relative;
-    border-bottom: 1px solid #EBEEF5;
-    .content-item-key{
-      display: inline-block;
-      //height: 25px;
-      //line-height: 25px;
-      position: absolute;
-      top: calc(50% - 12px);
-      z-index: 2001;
-      left: 0;
-      width: 30%;
-      text-align: right;
-    }
-    .content-item-value{
-      display: inline-block;
-      //height: 25px;
-      //line-height: 25px;
-      float: right;
-      width: 68%;
-      text-align: center;
-    }
-
-  }
-  .hover-bg:hover{
-    background-color: #F2F2F2;
-  }
-}
diff --git a/nezha-fronted/src/components/charts/chart-asset-info.vue b/nezha-fronted/src/components/charts/chart-asset-info.vue
index fdb613ed1..b9c889f65 100644
--- a/nezha-fronted/src/components/charts/chart-asset-info.vue
+++ b/nezha-fronted/src/components/charts/chart-asset-info.vue
@@ -35,8 +35,11 @@
                   </div>
                   <div class="basic-content" :class="{'shrink':hideBasic}">
                     <template v-if="assetInfos.Basic && Object.keys(assetInfos.Basic).length>0">
-                      <div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg" :class="{'bg-grey':index % 2 == 1}">
-                        <div class="content-item-key">{{item.label}}</div><div
+                      <div v-for="(item,index) in basicKey" :key="index" class="content-item hover-bg">
+                        <div class="content-item-key item-tip" :id="'basicKey' + index">
+                          <span>{{item.label}}</span>
+                          <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('basicKey', item.label, index, ready)">{{item.label}}</div>
+                        </div><div
                         class="content-item-value" v-if="item.prop == 'pingStatus'">
                           <div class="active-icon" :class="{'green':assetInfos.Basic[item.prop] == 1,'red':assetInfos.Basic[item.prop] != 1}"></div>
                           <span>{{assetInfos.Basic.pingRtt ? assetInfos.Basic.pingRtt + 'ms' : '&nbsp;'}}</span>
@@ -47,8 +50,9 @@
                         <div class="content-item-value" v-else-if="item.prop == 'state'">
                           {{assetInfos.Basic[item.prop] == 1?$t('asset.createAssetTab.inStock'):$t('asset.createAssetTab.outStock')}}
                         </div>
-                        <div class="content-item-value" v-else>
-                          {{assetInfos.Basic[item.prop] ? assetInfos.Basic[item.prop] : "&nbsp;"}}
+                        <div class="content-item-value item-tip" v-else :id="'basicValue' + index">
+                          <span>{{assetInfos.Basic[item.prop] ? assetInfos.Basic[item.prop] : "&nbsp;"}}</span>
+                          <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('basicValue', assetInfos.Basic[item.prop], index, ready)">{{assetInfos.Basic[item.prop]}}</div>
                         </div>
                       </div>
                     </template>
@@ -60,9 +64,16 @@
                     <span>{{$t('asset.createAssetTab.featureTitle')}}</span>
                   </div>
                   <div class="feature-content" :class="{'shrink':hideFeature}">
-                    <div v-for="(value,key,index) in assetInfos.Feature" class="content-item" :class="{'bg-grey':index % 2 == 1,'hover-bg':Array.isArray(value) && value.length>0 &&typeof value[0] == 'string'}">
-                      <div class="content-item-key" >{{key}}</div><div
-                      class="content-item-value" v-if="typeof value == 'string'">{{value}}</div><div v-if="Array.isArray(value) && value.length>0" class="content-item-value content-item-value-muti">
+                    <div v-for="(value,key,index) in assetInfos.Feature" class="content-item item-tip">
+                      <div class="content-item-key item-tip" :id="'featureKey' + index">
+                        <span>{{key}}</span>
+                        <div class="item-tip-hide item-tip-key el-popover" :class="itemTip('featureKey', key, index, ready)">{{key}}</div>
+                      </div><div
+                      class="content-item-value item-tip" :id="'featureValue' + index" v-if="typeof value == 'string'">
+                        <span>{{value}}</span>
+                        <div class="item-tip-hide item-tip-value el-popover" :class="itemTip('featureValue', key, index, ready)">{{value}}</div>
+                      </div><div
+                      v-if="Array.isArray(value) && value.length>0" class="content-item-value content-item-value-muti">
                         <div v-if="typeof value[0] == 'string'" class="item-value-sub" v-for="(item,index) in value" :key="index">{{item}}</div>
                         <el-table
                           v-else
@@ -131,6 +142,7 @@
     },
     data() {
       return {
+        ready: false,
         data: {}, // 该图表信息,chartItem
         unit:{},
         isError:false,
@@ -223,6 +235,25 @@
         ]
       };
     },
+    computed: {
+      itemTip() {
+        return function(type, content, index, ready) {
+          let className = "";
+          if (ready) {
+            let cellDom = document.querySelector(`#${type}${index}`);
+            let spanDom = document.createElement("span");
+            spanDom.style.display = "inline-block";
+            spanDom.innerText = content;
+            cellDom.appendChild(spanDom);
+            if (cellDom.offsetWidth-16 < spanDom.offsetWidth) {
+              className = "item-tip-show";
+            }
+            cellDom.removeChild(spanDom);
+          }
+          return className;
+        }
+      },
+    },
     methods: {
       startResize(e) {
         let vm = this;
@@ -330,6 +361,9 @@
       this.$nextTick(()=>{
         this.$refs.scrollbar.update();
       })
+      setTimeout(() => {
+        this.ready = true;
+      }, 300);
     },
     beforeDestroy() {
       this.clearChart();
diff --git a/nezha-fronted/src/components/charts/chart-table.vue b/nezha-fronted/src/components/charts/chart-table.vue
index d9c470899..ab75a3bfb 100644
--- a/nezha-fronted/src/components/charts/chart-table.vue
+++ b/nezha-fronted/src/components/charts/chart-table.vue
@@ -77,7 +77,7 @@
               </template>
             </el-table-column>
           </el-table>
-          <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" ></Pagination>
+          <Pagination :pageObj="screenPageObj" :post-page-sizes="pageSizes" @pageNo='screenPageNo' @pageSize='screenPageSize' ref="Pagination" :popper-append-to-body="false"></Pagination>
           <loading  :ref="'localLoadingScreen'+chartIndex"></loading>
         </el-dialog>
         <span class="vue-resizable-handle" @mousedown="startResize"></span>
diff --git a/nezha-fronted/src/components/charts/chart.scss b/nezha-fronted/src/components/charts/chart.scss
index 4d900c889..550605130 100644
--- a/nezha-fronted/src/components/charts/chart.scss
+++ b/nezha-fronted/src/components/charts/chart.scss
@@ -1,4 +1,3 @@
-/* ---------edit-chart-move--------- */
 .clearfix:after{
   display: block;
   content: "";
@@ -54,7 +53,6 @@
 .nz-chart-dropdown {
   height: 180px;
   li {
-    /*padding: 0 20px !important;*/
     padding-left:15px !important;
     padding-right:0px !important;
     width:140px;
@@ -67,7 +65,6 @@
 .nz-chart-dropdown-one {
   height: 36px;
   li {
-    /*padding: 0 20px !important;*/
     padding-left:15px !important;
     padding-right:0px !important;
     width:140px;
@@ -106,7 +103,7 @@
   font-size: 75%;
   z-index: 3;
 }
-.fa , .fa-model{
+.fa, .fa-model{
   display: inline-block;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
@@ -231,8 +228,6 @@
       transition: all 0.2s linear;
       width: 100%;
       margin-bottom: 5px;
-      /*border-left: 1px solid rgb(235, 238, 245);
-      border-right: 1px solid rgb(235, 238, 245);*/
       box-sizing: border-box;
       .content-item>div {
         display: inline-block;
@@ -246,10 +241,52 @@
         line-height: 26px;
         border-bottom: 1px solid rgb(235, 238, 245);
         display: flex;
+        position: relative;
+        .item-tip {
+          .item-tip-hide {
+            display: none;
+            position: absolute;
+            bottom: 34px;
+            min-width: 50px;
+            white-space: normal;
+          }
+          .item-tip-key {
+            left: 17%;
+            transform: translateX(-50%);
+            width: 33%;
+          }
+          .item-tip-value {
+            left: 67%;
+            width: 63%;
+            transform: translateX(-50%);
+          }
+          .item-tip-hide::after {
+            content: '';
+            display: block;
+            width:0;
+            height:0;
+            overflow: hidden;
+            font-size: 0;
+            line-height: 0;
+            border: 5px;
+            border-style: dashed dashed solid dashed;
+            border-color: white transparent transparent transparent;
+            position: absolute;
+            left: 50%;
+            bottom: 0;
+            transform: translate(-50%, 10px);
+          }
+        }
+        .item-tip:hover .item-tip-show {
+          display: block;
+        }
         .content-item-key {
           color: #666;
           width: 35%;
           height: 100%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
         }
         .content-item-value {
           .item-value-sub {
@@ -281,7 +318,9 @@
               background-color: white;
             }
           }
-
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
           border-left: 1px solid rgb(235, 238, 245);
           color: #1a1a1a;
           width: 65%;