diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..aaab9d604efaab4eb1e8d4bc6f9759a68318dc8f
--- /dev/null
+++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip-template.spec.ts
@@ -0,0 +1,160 @@
+import { mount } from '@vue/test-utils';
+import { ReadTip, } from '../index';
+import { nextTick } from 'vue'
+import TipsTemplate from '../src/read-tip-template';
+
+
+describe('read-tip test', () => {
+
+  beforeEach(() => {
+    // create teleport target
+    const el = document.createElement('div')
+    el.id = 'readtip-target'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    // clean up
+    document.body.outerHTML = ''
+  })
+  it('read-tip init render', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      position: 'top',
+      appendToBody: false,
+      selector: '#readtip-target',
+      title: 'Name: Jack',
+      content: 'This is Jack\'s profile',
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      }
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.title)
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.content)
+
+
+  })
+
+  const position = ['top', 'left', 'right', 'bottom']
+
+  position.forEach(pos => {
+    it(`read-tip position ${pos}`, async () => {
+      // 基础用法
+
+      const defaultTemplateProps = {
+        position: pos,
+        appendToBody: false,
+        selector: '#readtip-target',
+        title: 'Name: Jack',
+        content: 'This is Jack\'s profile',
+      }
+      const wrapper = mount(TipsTemplate, {
+        props: {
+          defaultTemplateProps
+        }
+      })
+
+      expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('read-tip-container ' + defaultTemplateProps.position)
+
+    })
+  })
+
+  it('read-tip appendToBody = true', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      position: 'top',
+      appendToBody: true,
+      selector: '#readtip-target',
+      title: 'Name: Jack',
+      content: 'This is Jack\'s profile',
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      }
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toBe('')
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).not.toContain(defaultTemplateProps.title)
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).not.toContain(defaultTemplateProps.content)
+
+
+  })
+
+  it('read-tip contentTemplate', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      position: 'top',
+      appendToBody: false,
+      selector: '#readtip-target',
+      contentTemplate: true
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      },
+      slots: {
+        default: `<div> I am test </div>`
+      }
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('<div> I am test </div>')
+
+
+  })
+
+  it('read-tip dataFn', async () => {
+    // 基础用法
+
+    const defaultTemplateProps = {
+      appendToBody: false,
+      selector: '#readtip-target',
+      dataFn: getDataFromDB,
+      key: 'GetData'
+    }
+    function getDataFromDB({ element, rule }) {
+      return { content: element.innerHTML, title: rule.key }
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      },
+
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain('GetData')
+  })
+
+  it('read-tip overlayClassName', async () => {
+    // 基础用法
+    const defaultTemplateProps = {
+      appendToBody: false,
+      selector: '#readtip-target',
+      dataFn: getDataFromDB,
+      key: 'GetData',
+      overlayClassName: 'red'
+    }
+    function getDataFromDB({ element, rule }) {
+      return { content: element.innerHTML, title: rule.key }
+    }
+    const wrapper = mount(TipsTemplate, {
+      props: {
+        defaultTemplateProps
+      },
+
+    })
+
+    expect(document.querySelector(defaultTemplateProps.selector).innerHTML).toContain(defaultTemplateProps.overlayClassName)
+  })
+})
+
+
diff --git a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
index fae43c0e63a45a3f7dca07b4e5b4a02c22c6f84c..3b5e72e14d1c72908d542bc5257a92cc7c6bb8e6 100644
--- a/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
+++ b/packages/devui-vue/devui/read-tip/__tests__/read-tip.spec.ts
@@ -1,8 +1,96 @@
 import { mount } from '@vue/test-utils';
-import { ReadTip, ReadTipDirective } from '../index';
+import { ReadTip, } from '../index';
+import { nextTick } from 'vue'
+import Template from '../src/read-tip-template';
 
 describe('read-tip test', () => {
+  beforeEach(() => {
+    // create teleport target
+    const el = document.createElement('div')
+    el.className = 'readtip-target'
+    document.body.appendChild(el)
+  })
+
+  afterEach(() => {
+    // clean up
+    document.body.outerHTML = ''
+  })
   it('read-tip init render', async () => {
-    // todo
+    // 基础用法
+    const readTipOptions = {
+      trigger: 'hover',
+      rules: {
+        trigger: 'click',
+        position: 'top',
+        appendToBody: false,
+        selector: '.readtip-target',
+        title: 'Name: Jack',
+        content: 'This is Jack\'s profile',
+      },
+    };
+    const wrapper = mount(ReadTip, {
+      props: {
+        readTipOptions
+      },
+      slots: {
+        default: `<span class="readtip-target">@Jack</span>`
+      }
+    })
+    
+    expect(wrapper.find('.readtip-target').classes()).toContain('readtip-target')
+    
+    // dom元素被点击 template会进行展示
+    await wrapper.find('.readtip-target').trigger('click')
+    await nextTick()
+    
+    let template = wrapper.findComponent(Template)
+
+    expect(template.exists()).toBe(true)
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+
+     // body元素被点击 template会消失
+    await document.body.click()
+    await nextTick()
+
+    template = wrapper.findComponent(Template)
+    expect(template.exists()).toBe(false)
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(1)
+  })
+
+  it('read-tip more show tip', async () => {
+    // 基础用法
+    const readTipOptions = {
+      trigger: 'hover',
+      rules: {
+        trigger: 'hover',
+        selector: '.readtip-target',
+        title: 'Name: Jack',
+        content: 'This is Jack\'s profile',
+      },
+    };
+    const wrapper = mount(ReadTip, {
+      props: {
+        readTipOptions
+      },
+      slots: {
+        default: `
+        <span class="readtip-target">@Jack</span>
+        <span class="readtip-target">@Mary</span>
+        `
+      }
+    })
+    
+    
+    // dom元素被移入 template会进行展示
+    await wrapper.find('.readtip-target').trigger('mouseover')
+    
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+
+     // dom元素被移出 template会消失
+    await wrapper.find('.readtip-target').trigger('mouseout')
+    await nextTick()
+
+    expect(wrapper.findAll('[data-test="todo"]')).toHaveLength(2)
+
   })
 })
diff --git a/packages/devui-vue/devui/read-tip/index.ts b/packages/devui-vue/devui/read-tip/index.ts
index 877133f1a1784c41865e0a5ad339907190daa475..4ccae88c9e3e2ca7e7087dda6a48be9147312326 100644
--- a/packages/devui-vue/devui/read-tip/index.ts
+++ b/packages/devui-vue/devui/read-tip/index.ts
@@ -10,7 +10,7 @@ export { ReadTip, }
 export default {
   title: 'ReadTip 阅读提示',
   category: '反馈',
-  status: '50%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  status: '已完成', 
   install(app: App): void {
     app.use(ReadTip as any)
   }
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
index 10aa734e11b40c4fe63774d7ba26eadc84640930..ab725c8acbe0195eaab1793704ae4c684ebb7134 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip-template.tsx
@@ -20,7 +20,8 @@ export default defineComponent({
     const temp = ref(null);
     onMounted(() => {
       const domBounding = document.querySelector(query).getBoundingClientRect();
-      const distance = 10;
+      
+      const distance = 10; 
       let positionTop = 0;
       let positionLeft = 0;
       const targetDom = document.querySelector('.read-tip-container').getBoundingClientRect();
diff --git a/packages/devui-vue/devui/read-tip/src/read-tip.tsx b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
index cc9ad63f87a30aaa9d97b4837c32130401dc047f..0ba6cce678e274ac1ce3ddc67a3139d3dbd71a85 100644
--- a/packages/devui-vue/devui/read-tip/src/read-tip.tsx
+++ b/packages/devui-vue/devui/read-tip/src/read-tip.tsx
@@ -19,7 +19,6 @@ export default defineComponent({
       appendToBody: true,
       rules: { selector: null },
     };
-    const tempTop = ref(0)
     // 合并基础配置
     const options = { ...defaultOptions, ...props.readTipOptions }
     const defaultSlot = ref(null)
@@ -148,7 +147,7 @@ export default defineComponent({
 
           {(refRules).map(rule => (
             <div
-
+              data-test="todo"
             >
               {rule.status && (<TipsTemplate defaultTemplateProps={{ ...rule }} >
                 {
diff --git a/packages/devui-vue/docs/components/read-tip/index.md b/packages/devui-vue/docs/components/read-tip/index.md
index 19fe559bbae8aa1c908fd8e1b0cc7162dd4045ef..7742abd8a8b516baec60d12e0dc2f738b0713332 100644
--- a/packages/devui-vue/docs/components/read-tip/index.md
+++ b/packages/devui-vue/docs/components/read-tip/index.md
@@ -22,7 +22,6 @@
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'hover',
     rules: {
@@ -75,7 +74,6 @@ const readTipOptions =  {
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'click',
     showAnimate: false,
@@ -101,14 +99,14 @@ const readTipOptions =  {
         overlayClassName:'red',
       },
       {
-        trigger: 'click',
+        trigger: 'hover',
         selector: '.third-content',
         position: 'bottom',
         title: 'This Is the Third Title',
         content: 'Aenean libero urna, scelerisque tincidunt',
       }, 
       {
-        trigger: 'click',
+        trigger: 'hover',
         selector: '.four-content',
         position: 'right',
         title: 'This Is the Third Title',
@@ -206,7 +204,6 @@ const readTipOptions =  {
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =  {
     trigger: 'click',    
     rules: {
@@ -275,10 +272,10 @@ const readTipOptions =  {
   <p class="readtip-content">Using function fullElement to pass data</p>
   <p>The following is the target you want to show readtip</p>
   <h4 class="readtip-target">Display readtip</h4>
+  </d-read-tip>
 </template>
 
 <script setup>
-import { defineComponent } from 'vue'
 const readTipOptions =   {
     trigger: 'click',
     rules: {