Tooltip(doc): add router-link description (#3669)

build/cooking.demo.js

@@ -90,7 +90,8 @@ cooking.add('vueMarkdown', {
         }
         return '</div></demo-block>\n';
       }
-    }]
+    }],
+    [require('markdown-it-container'), 'tip']
   ],
   preprocess: function(MarkdownIt, source) {
     MarkdownIt.renderer.rules.table_open = function() {

examples/app.vue

@@ -25,6 +25,13 @@
     text-decoration: none;
   }
 
+  code {
+    background-color: #f9fafc;
+    padding: 0 4px;
+    border: 1px solid #eaeefb;
+    border-radius: 4px;
+  }
+
   button, input, select, textarea {
     font-family: inherit;
     font-size: inherit;
@@ -88,9 +95,23 @@
         }
       }
     }
+
     p {
       font-size: 14px;
       color: #5e6d82;
+      line-height: 1.5em;
+    }
+
+    .tip {
+      padding: 8px 16px;
+      background-color: #ECF8FF;
+      border-radius: 4px;
+      border-left: #50bfff 5px solid;
+
+      code {
+        background-color: rgba(#fff, .7);
+        color: #445368;
+      }
     }
   }
   .demo {

examples/docs/en-US/tooltip.md

@@ -190,6 +190,10 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 :::
 
 
+:::tip
+The `router-link` component is not supported in tooltip, please use `vm.$router.push`.
+:::
+
 
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
@@ -203,6 +207,6 @@ In fact, Tooltip is an extension based on [Vue-popper](https://github.com/elemen
 |  transition     |  animation name | string             | — | `fade-in-linear` |
 |  visible-arrow   |  whether an arrow is displayed. For more information, check [Vue-popper](https://github.com/element-component/vue-popper) page | boolean | — | true |
 |  options        | [popper.js](https://popper.js.org/documentation.html) parameters | Object            | refer to [popper.js](https://popper.js.org/documentation.html) doc | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-| openDelay | delay of appearance, in millisecond | number | — | 0 |
+| open-delay | delay of appearance, in millisecond | number | — | 0 |
 | manual | whether to control Tooltip manually. `mouseenter` and `mouseleave` won't have effects if set to `true` | boolean | — | false |
 |  popper-class  |  custom class name for Tooltip's popper | string | — | — |

examples/docs/zh-CN/tooltip.md

@@ -177,13 +177,11 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 
 除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：
 
-`transition`属性可以定制显隐的动画效果，默认为`fade-in-linear`。
-
-如果需要关闭`tooltip`功能，`disabled`属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。
+`transition` 属性可以定制显隐的动画效果，默认为`fade-in-linear`。
+如果需要关闭 `tooltip` 功能，`disabled` 属性可以满足这个需求，它接受一个`Boolean`，设置为`true`即可。
 
 事实上，这是基于 [Vue-popper](https://github.com/element-component/vue-popper) 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。
-
-当然，Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
+当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。
 
 :::demo
 ```html
@@ -195,6 +193,10 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 ```
 :::
 
+:::tip
+tooltip 内不支持 `router-link` 组件，请使用 `vm.$router.push` 代替。
+:::
+
 ### Attributes
 | 参数               | 说明                                                     | 类型              | 可选值      | 默认值 |
 |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
@@ -206,7 +208,7 @@ Tooltip 组件提供了两个不同的主题：`dark`和`light`。
 |  offset        |  出现位置的偏移量  | Number           | — |  0 |
 |  transition     |  定义渐变动画      | String             | — | `fade-in-linear` |
 |  visible-arrow   |  是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
-|  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
-| openDelay | 延迟出现，单位毫秒 | Number | — | 0 |
+|  options        | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object            | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | { boundariesElement: 'body', gpuAcceleration: false } |
+| open-delay | 延迟出现，单位毫秒 | Number | — | 0 |
 | manual | 手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效 | Boolean | — | false |
 | popper-class | 为 Tooltip 的 popper 添加类名 | String | — | — |

examples/pages/template/component.tpl

@@ -4,7 +4,7 @@
     box-sizing: border-box;
     .content {
       margin-left: -1px;
-      
+
       > {
         h3 {
           margin: 45px 0 15px;
@@ -16,7 +16,8 @@
           color: #5e6d82;
           font-size: 14px;
           margin-bottom: 45px;
-          
+          line-height: 1.5em;
+
           strong {
             font-weight: normal;
           }