From 587a15c55830af7cd7d89db8793cb7976af874a5 Mon Sep 17 00:00:00 2001
From: xiaojiujiu <3507440900@qq.com>
Date: Thu, 2 Dec 2021 00:31:37 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=A2=9E=E5=8A=A0tooltip=E8=8B=B1?=
 =?UTF-8?q?=E6=96=87=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../docs/en-US/components/tooltip/index.md    | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 packages/devui-vue/docs/en-US/components/tooltip/index.md

diff --git a/packages/devui-vue/docs/en-US/components/tooltip/index.md b/packages/devui-vue/docs/en-US/components/tooltip/index.md
new file mode 100644
index 00000000..495cfc22
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/tooltip/index.md
@@ -0,0 +1,82 @@
+# Tooltip
+
+Text notification.
+
+### When To Use
+When users move the cursor to a text, they can see what should do next.
+
+### Basic Usage
+
+:::demo
+
+```vue
+<template>
+  <div class="tooltip-buttons">
+    <d-tooltip position="left" content="I am a HTML Element!">
+      <d-button btnStyle="common">left</d-button>
+    </d-tooltip>
+    <d-tooltip position="top" content="I am a HTML Element!">
+      <d-button btnStyle="common">top</d-button>
+    </d-tooltip>
+    <d-tooltip position="bottom" content="I am a HTML Element!">
+      <d-button btnStyle="common">bottom</d-button>
+    </d-tooltip>
+    <d-tooltip position="right" content="I am a HTML Element!">
+      <d-button btnStyle="common">right</d-button>
+    </d-tooltip>
+    <d-tooltip content="No Animation" :showAnimation="false">
+      <d-button btnStyle="common">No Animation</d-button>
+    </d-tooltip>
+  </div>
+</template>
+<style>
+.tooltip-buttons {
+  display: flex;
+}
+.tooltip-buttons .devui-tooltip {
+  margin-right: 10px;
+}
+</style>
+```
+
+:::
+
+### Delay Trigger
+
+This event is triggered only when the mouse pointer is moved in for more than [mouseEnterDelay] milliseconds. The default value is 150 ms to prevent flashing caused by unintentional strokes. The toolTip component is hidden only after [mouseLeaveDelay] milliseconds after the cursor is moved out. The default value is 100 milliseconds.
+
+:::demo
+
+```vue
+<template>
+  <d-tooltip
+    position="top"
+    content="Mouse enter 500ms later."
+    mouseEnterDelay="500"
+  >
+    <d-button>MouseEnter delay 500ms</d-button>
+  </d-tooltip>
+  <br />
+  <d-tooltip
+    position="top"
+    content="Mouse leave 1000ms later."
+    mouseLeaveDelay="1000"
+  >
+    <d-button btnStyle="common">MouseEnter delay 1000ms</d-button>
+  </d-tooltip>
+</template>
+```
+
+:::
+
+### API
+
+Tooltip parameter
+
+|      Parameter       |              Type              |                Default                | Description                                              | Jump to Demo             | Global Config |
+| :-------------: | :----------------------------: | :--------------------------------: | :------------------------------------------------ | --------------------- | ---------- |
+|     content     |      `string\|DOMString`       |                 --                 | Required. Tooltip display content                            | [Basic Usage](#basic-usage) |            |
+|    position     | `PositionType\|PositionType[]` | ['top', 'right', 'bottom', 'left'] | Optional. Tooltip display position                            | [Basic Usage](#basic-usage) |            |
+|  showAnimation  |           `boolean`            |                true                | Optional. Whether to display the drawing animation                            |                       | ✔          |
+| mouseEnterDelay |            `number`            |                150                 | Optional. Delay for displaying Tooltip after the mouse is enter. The unit is ms | [Delay Trigger](#delay-trigger) |
+| mouseLeaveDelay |            `number`            |                100                 | Optional. Delay for hiding Tooltip after the mouse is leave, The unit is ms | [Delay Trigger](#delay-trigger) |
-- 
Gitee