diff --git a/src/components/TooltipItem/index.vue b/src/components/TooltipItem/index.vue
new file mode 100644
index 00000000..63c608be
--- /dev/null
+++ b/src/components/TooltipItem/index.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="box">
+    <div ref="row_content" class="item_box">
+      <p :style="`flex-basis: ${labelWidth}px`">{{ label }}</p>
+      <el-tooltip :disabled="tooltipShow" effect="dark" :content="content" placement="top">
+        <p ref="content_item">{{ content }}</p>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TooltipItem',
+  props: {
+    labelWidth: {
+      type: Number,
+      default: 80
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      tooltipShow: true
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.tooltipShowFun()
+      })
+    })
+  },
+  methods: {
+    tooltipShowFun() {
+      const rowWidth = this.$refs['row_content'].offsetWidth
+      const contentWidth = this.$refs['content_item'].offsetWidth
+      if ((rowWidth - this.labelWidth) <= contentWidth) {
+        this.tooltipShow = false
+      } else {
+        this.tooltipShow = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.box{
+  width: 100%;
+  .item_box{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    p{
+      &:nth-child(1) {
+        display: block;
+        flex-basis: 80px;
+        flex-grow: 0;
+        flex-shrink: 0;
+        font-weight: 500;
+        font-size: 16px;
+        color: #384250
+      }
+      &:nth-child(2) {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-weight: 500;
+        font-size: 14px;
+        color: #8f8f8f
+      }
+    }
+  }
+}
+</style>
diff --git a/src/router/modules/components.js b/src/router/modules/components.js
index 0da96f97..666a4c47 100644
--- a/src/router/modules/components.js
+++ b/src/router/modules/components.js
@@ -95,6 +95,12 @@ const componentsRouter = {
       component: () => import('@/views/components-demo/drag-kanban'),
       name: 'DragKanbanDemo',
       meta: { title: 'Drag Kanban' }
+    },
+    {
+      path: 'tooltip-items',
+      component: () => import('@/views/components-demo/tooltip-items'),
+      name: 'TooltipItemsDome',
+      meta: { title: 'Tooltip Items' }
     }
   ]
 }
diff --git a/src/views/components-demo/tooltip-items.vue b/src/views/components-demo/tooltip-items.vue
new file mode 100644
index 00000000..df085fb2
--- /dev/null
+++ b/src/views/components-demo/tooltip-items.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="components-container">
+    <el-card class="box-card">
+      <el-row :gutter="10">
+        <el-col :span="6">
+          <tooltip-item label="申请人：" content="张三，李四，王二，张伟，大鹏，小雕" />
+        </el-col>
+        <el-col :span="6">
+          <tooltip-item label="发明人：" content="张三，李四，王二" />
+        </el-col>
+        <el-col :span="6">
+          <tooltip-item label="申请日期：" content="2020-07-08" />
+        </el-col>
+        <el-col :span="6">
+          <tooltip-item label="IPC分类号：" :label-width="92" content="DC12312312412312312412314124" />
+        </el-col>
+      </el-row>
+      <el-row :gutter="10">
+        <el-col :span="8">
+          <tooltip-item label="地址：" content="上海市徐汇区上海市徐汇区上海市徐汇区上海市徐汇区上海市徐汇区" />
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+<script>
+import TooltipItem from '@/components/TooltipItem'
+export default {
+  name: 'TooltipItems',
+  components: { TooltipItem }
+}
+</script>
+
+<style scoped />