chore: tooltip hover 模式下鼠标移上去时不会关闭，新增 popover 独立文档页面 (#3573)

* chore: popover hover 模式下鼠标移上去时不会关闭，新增 popover 独立文档

* 恢复误改的文档示例

docs/zh-CN/components/action.md

@@ -320,7 +320,7 @@ icon 也可以是 url 地址，比如
 **属性表**
 
 | 属性名   | 类型                                                                                     | 默认值 | 说明                                                                                                                                   |
-| -------- | ---------------------------------------------------------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| -------- | ---------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |
 | api      | [Api](../../docs/types/api)                                                              | -      | 请求地址，参考 [api](../../docs/types/api) 格式说明。                                                                                  |
 | redirect | [模板字符串](../../docs/concepts/template#%E6%A8%A1%E6%9D%BF%E5%AD%97%E7%AC%A6%E4%B8%B2) | -      | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。                                                                                     |
 | feedback | `DialogObject`                                                                           | -      | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考[Dialog](./Dialog) |
@@ -862,6 +862,46 @@ action 还可以使用 `body` 来渲染其他组件，让那些不支持行为
 
 在这种模式下不支持按钮的各种配置项，比如 `label`、`size`、`icon` 等，因为它只作为容器组件，没有展现。
 
+## 按钮提示
+
+通过 `tooltip` 来设置提示
+
+```schema: scope="body"
+{
+  "label": "弹框",
+  "type": "button",
+  "actionType": "link",
+  "link": "../index",
+  "tooltip": "点击链接跳转"
+}
+```
+
+如果按钮是 disabled，需要使用 `disabledTip`
+
+```schema: scope="body"
+{
+  "label": "弹框",
+  "type": "button",
+  "actionType": "link",
+  "disabled": true,
+  "link": "../index",
+  "disabledTip": "禁用了"
+}
+```
+
+还可以通过 `tooltipPlacement` 设置弹出位置
+
+```schema: scope="body"
+{
+  "label": "弹框",
+  "type": "button",
+  "actionType": "link",
+  "link": "../index",
+  "tooltipPlacement": "right",
+  "tooltip": "点击链接跳转"
+}
+```
+
 ## 通用属性表
 
 所有`actionType`都支持的通用配置项

docs/zh-CN/components/card.md

@@ -495,9 +495,9 @@ order: 31
           "size": "none",
           "style": {
             "display": "flex",
-            "align-items": "center",
+            "alignItems": "center",
-            "justify-content": "space-between",
+            "justifyContent": "space-between",
-            "margin-bottom": "4px"
+            "marginBottom": "4px"
           },
           "body": [
             {
@@ -506,8 +506,8 @@ order: 31
               "style": {
                 "flex": "1",
                 "overflow": "hidden",
-                "white-space": "nowrap",
+                "whiteSpace": "nowrap",
-                "text-overflow": "ellipsis"
+                "textOverflow": "ellipsis"
               },
               "body": "单元格"
             },
@@ -526,7 +526,7 @@ order: 31
           "size": "none",
           "style": {
             "color": "#999",
-            "font-size": "12px"
+            "fontSize": "12px"
           },
           "body": "描述信息"
         }

docs/zh-CN/components/popover.md

@@ -0,0 +1,195 @@
+---
+title: PopOver 弹出提示
+description:
+type: 0
+group: ⚙ 功能
+menuName: popover
+icon:
+order: 60
+---
+
+popover 不是一个独立组件，它是嵌入到其它组件中使用的，目前可以在以下组件中配置
+
+- table 的 column
+- list 的 column
+- static
+- cards 里的字段
+
+## 基本配置
+
+比如在 CRUD 的 tpl 中，可以默认截断显示，然后加上 popOver 来显示全部内容
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "api": "/api/mock2/sample?waitSeconds=1",
+    "columns": [
+        {
+            "type": "tpl",
+            "name": "engine",
+            "label": "Rendering engine",
+            "tpl": "${engine|truncate:6}",
+            "popOver": "${engine}"
+        }
+    ]
+}
+```
+
+> 上面的 popOver 精简写法只支持 1.6.5 及以上版本，之前版本需要使用 "popOver": {"body": "$engine"}
+
+## 在其它组件里的示例
+
+```schema: scope="body"
+[
+  {
+    "type": "form",
+    "body": [
+      {
+        "name": "static",
+        "type": "static",
+        "label": "静态展示",
+        "value": "static",
+        "popOver": "弹出内容"
+      }
+    ]
+  },
+  {
+    "type": "service",
+    "api": "/api/mock2/sample?perPage=5",
+    "body": [
+      {
+        "type": "list",
+        "source": "$rows",
+        "listItem": {
+          "body": [
+            {
+              "type": "hbox",
+              "columns": [
+                {
+                  "label": "Engine",
+                  "name": "engine",
+                  "popOver": "弹出内容"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    ]
+  },
+  {
+    "type": "service",
+    "api": "/api/mock2/sample?perPage=5",
+    "body": {
+      "type": "cards",
+      "source": "$rows",
+      "card": {
+        "body": [
+          {
+            "label": "Engine",
+            "name": "engine",
+            "popOver": "弹出内容"
+          }
+        ]
+      }
+    }
+  }
+]
+```
+
+## 更多配置
+
+可以配置触发条件，是否显示 icon，title 等，具体请参考后面的配置列表
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "api": "/api/mock2/sample?waitSeconds=1",
+    "columns": [
+        {
+            "type": "tpl",
+            "name": "engine",
+            "label": "Rendering engine",
+            "tpl": "${engine|truncate:6}",
+            "popOver": {
+                "trigger": "hover",
+                "position": "left-top",
+                "showIcon": false,
+                "title": "标题",
+                "body": {
+                    "type": "tpl",
+                    "tpl": "${engine}"
+                }
+            }
+        }
+    ]
+}
+```
+
+## popOverEnableOn
+
+可以给列上配置`popOverEnableOn`属性，该属性为[表达式](../../docs/concepts/expression)，通过[表达式](../../docs/concepts/expression)配置当前行是否启动`popOver`功能
+
+```schema: scope="body"
+{
+    "type": "crud",
+    "api": "/api/mock2/sample?waitSeconds=1",
+    "columns": [
+        {
+            "name": "id",
+            "label": "ID",
+            "popOver": {
+                "body": {
+                    "type": "tpl",
+                    "tpl": "${id}"
+                }
+            },
+            "popOverEnableOn": "this.id == 1"
+        },
+        {
+            "name": "engine",
+            "label": "Rendering engine",
+            "popOver": {
+                "body": {
+                    "type": "tpl",
+                    "tpl": "${engine}"
+                }
+            }
+        }
+    ]
+}
+```
+
+## 属性列表
+
+- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
+- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
+- `position` 配置弹出位置，只有 `popOver` 模式有用，默认是自适应。
+  可选参数：
+
+  - `center`
+  - `left-top`
+  - `right-top`
+  - `left-bottom`
+  - `right-bottom`
+
+  atX-atY-myX-myY
+  即：对齐目标的位置-对齐自己的位置
+
+  - `left-top-right-bottom` 在目标位置的左上角显示。
+  - `left-center-right-center` 在目标的左侧显示，垂直对齐。
+  - ...
+
+  固定位置
+
+  - `fixed-center`
+  - `fixed-left-top`
+  - `fixed-right-top`
+  - `fixed-left-bottom`
+  - `fixed-right-bottom`。
+
+- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的偏移请设置这个。
+- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
+- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。
+- `title` 弹出框的标题。
+- `body` 弹出框的内容。

docs/zh-CN/components/table.md

@@ -623,7 +623,7 @@ order: 67
 
 ### 弹出框（popOver）
 
-可以给列上配置`popOver`属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容
+可以给列上配置 `popOver` 属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容
 
 ```schema: scope="body"
 {
@@ -648,104 +648,7 @@ order: 67
 }
 ```
 
-可以结合 truncate 用来优化表格中的长内容展示，比如默认只展示 20 个字符，剩下的点击查看更多出现。
+popOver 的其它配置请参考 [popover](./popover)
-
-```schema: scope="body"
-{
-    "type": "crud",
-    "api": "/api/mock2/sample?waitSeconds=1",
-    "columns": [
-        {
-            "name": "id",
-            "label": "ID"
-        },
-        {
-            "type": "tpl",
-            "name": "engine",
-            "label": "Rendering engine",
-            "tpl": "${engine|truncate:2}",
-            "popOver": {
-                "trigger": "hover",
-                "position": "left-top",
-                "showIcon": false,
-                "body": {
-                    "type": "tpl",
-                    "tpl": "${engine}"
-                }
-            }
-        }
-    ]
-}
-```
-
-> 示例内容没那么长，直接配置成 2 个字符了。
-
-可以给列上配置`popOverEnableOn`属性，该属性为[表达式](../../docs/concepts/expression)，通过[表达式](../../docs/concepts/expression)配置当前行是否启动`popOver`功能
-
-```schema: scope="body"
-{
-    "type": "crud",
-    "api": "/api/mock2/sample?waitSeconds=1",
-    "columns": [
-        {
-            "name": "id",
-            "label": "ID",
-            "popOver": {
-                "body": {
-                    "type": "tpl",
-                    "tpl": "${id}"
-                }
-            },
-            "popOverEnableOn": "this.id == 1"
-        },
-        {
-            "name": "engine",
-            "label": "Rendering engine",
-            "popOver": {
-                "body": {
-                    "type": "tpl",
-                    "tpl": "${engine}"
-                }
-            }
-        }
-    ]
-}
-```
-
-`popOver` 配置详情：
-
-- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。
-- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。
-- `position` 配置弹出位置，只有 `popOver` 模式有用。
-  可选参数：
-
-  - `center`
-
-  - `left-top`
-  - `right-top`
-  - `left-bottom`
-  - `right-bottom`
-
-  atX-atY-myX-myY
-  即：对齐目标的位置-对齐自己的位置
-
-  - `left-top-right-bottom` 在目标位置的左上角显示。
-  - `left-center-right-center` 在目标的左侧显示，垂直对齐。
-  - ...
-
-  固定位置
-
-  - `fixed-center`
-  - `fixed-left-top`
-  - `fixed-right-top`
-  - `fixed-left-bottom`
-  - `fixed-right-bottom`。
-
-- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的偏移请设置这个。
-- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。
-- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。
-- `title` 弹出框的标题。
-- `body` 弹出框的内容。
 
 ### 表头样式
 

examples/components/Components.tsx

@@ -188,6 +188,14 @@ export const components = [
         component: React.lazy(() =>
           import('../../docs/zh-CN/components/anchor-nav.md').then(wrapDoc)
         )
+      },
+
+      {
+        label: 'PopOver 弹出提示',
+        path: '/zh-CN/components/popover',
+        component: React.lazy(() =>
+          import('../../docs/zh-CN/components/popover.md').then(wrapDoc)
+        )
       }
     ]
   },

examples/components/Index.jsx

@@ -1,16 +1,16 @@
 export default {
   type: 'page',
-  body: {
+  title: '标题',
-    type: 'form',
+  remark: {
-    mode: 'horizontal',
+    title: '标题',
-    api: '/api/mock2/form/saveForm',
+    body: '这是一段描述问题，注意到了没，还可以设置标题。而且只有点击了才弹出来。',
-    debug: true,
+    icon: 'question-mark',
-    body: [
+    placement: 'right',
-      {
+    trigger: 'click',
-        type: 'input-date',
+    rootClose: true
-        name: 'date',
+  },
-        label: '日期'
+  body: '内容部分. 可以使用 \\${var} 获取变量。如: `\\$date`: ${date}',
-      }
+  aside: '边栏部分',
-    ]
+  toolbar: '工具栏',
-  }
+  initApi: '/api/mock2/page/initData'
 };

src/components/Tooltip.tsx

@@ -41,6 +41,8 @@ export class Tooltip extends React.Component<TooltipProps> {
       positionTop,
       classnames: cx,
       activePlacement,
+      onMouseEnter,
+      onMouseLeave,
       ...rest
     } = this.props;
 
@@ -53,6 +55,8 @@ export class Tooltip extends React.Component<TooltipProps> {
           className
         )}
         style={style}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         role="tooltip"
       >
         <div className={cx(`Tooltip-arrow`)} {...arrowProps} />

src/components/TooltipWrapper.tsx

@@ -52,7 +52,7 @@ export class TooltipWrapper extends React.Component<
     placement: 'top',
     trigger: ['hover', 'focus'],
     rootClose: false,
-    delay: 200
+    delay: 300
   };
 
   target: HTMLElement;
@@ -106,13 +106,7 @@ export class TooltipWrapper extends React.Component<
   }
 
   handleShow() {
-    // clearTimeout(this.timer);
+    this.timer && clearTimeout(this.timer);
-    // const {
-    //     delay
-    // } = this.props;
-
-    // this.timer = setTimeout(this.show, delay);
-    // 顺速让即将消失的层消失。
     waitToHide && waitToHide();
     this.show();
   }
@@ -217,6 +211,8 @@ export class TooltipWrapper extends React.Component<
         <Tooltip
           title={typeof tooltip !== 'string' ? tooltip.title : undefined}
           className={tooltipClassName}
+          onMouseEnter={~triggers.indexOf('hover') && this.handleMouseOver}
+          onMouseLeave={~triggers.indexOf('hover') && this.handleMouseOut}
         >
           {tooltip && (tooltip as TooltipObject).render ? (
             this.state.show ? (

src/renderers/PopOver.tsx

@@ -224,6 +224,11 @@ export const HocPopOver =
             ],
             ...popOver
           };
+        } else if (typeof popOver === 'string') {
+          schema = {
+            type: 'panel',
+            body: popOver
+          };
         } else if (popOver) {
           schema = {
             type: 'panel',