fix(Balloon): add break-word to Tooltip, close #1680 (#1681)

* fix(Balloon): add break-word to Tooltip, close #1680 * fix(Balloon): make tooltip clickable * docs(Balloon): update docs * chore(*): add polyfill for ie
alibaba-fusion · Mar 16, 2020 · f0a5c64 · f0a5c64
1 parent b1e4610
commit f0a5c64
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 3 deletions.
diff --git a/docs/balloon/index.en-us.md b/docs/balloon/index.en-us.md
@@ -11,7 +11,7 @@
 ### When To Use
 
 -   Balloon is used when you hope to show auxiliary or help message during users' interacting with the illustrated object (text, picture, input box, etc.).
--   Particularly, Balloon.Tooltip is a simplified Balloon for displaying tip when hovered.
+-   Particularly, Balloon.Tooltip is a simplified Balloon for displaying tip when hovered. If you want the content to be clickable, use `<Balloon.Tootip delay={100} />`
 
 ### Note
 
@@ -66,6 +66,7 @@
 | pure           | pure render or not                                                                                                                                                      | Boolean         | -                   |
 | popupContainer | popupContainer of the popup, being either dom id or a function to return the dom                                                                                                                                   | String/Function | -                   |
 | id             | id of popup. only when you set value, balloon will support accessibility                                                                                                                                                     | String          | -                   |
+| delay          | If you want the content of Tooltip to be clickable, set 100 for example                                                                                                                               | Number       | 0           |
 
 ## Known Issues
 

diff --git a/docs/balloon/index.md b/docs/balloon/index.md
@@ -14,7 +14,7 @@
 ### 何时使用
 
 -   当用户与被说明对象（文字，图片，输入框等）发生交互行为的action开始时, 即刻跟随动作出现一种辅助或帮助的提示信息。
--   其中Balloon.Tooltip是简化版本，主要用于hover时显示简单文案。
+-   其中Balloon.Tooltip是简化版本，主要用于hover时显示简单文案，如果想让内容可被点击 可以设置`<Balloon.Tootip delay={100} />`
 
 ### 使用注意
 
@@ -70,6 +70,7 @@
 | popupContainer | 指定浮层渲染的父节点, 可以为节点id的字符串，也可以返回节点的函数。                                                                                                                                   | any          | -           |
 | followTrigger  | 是否跟随滚动                                                                                                                                                                | Boolean      | -           |
 | id             | 弹层id, 传入值才会支持无障碍                                                                                                                                                      | String       | -           |
+| delay          | 如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100                                                                                                                                  | Number       | 0           |
 
 ## 已知问题
 

diff --git a/src/balloon/main.scss b/src/balloon/main.scss
@@ -12,6 +12,7 @@
     font-weight: $balloon-content-font-weight;
     animation-duration: $motion-duration-standard;
     animation-timing-function: $motion-ease-in-out;
+    word-wrap: break-all;
     word-wrap: break-word;
     z-index: 0;
     &:focus,
@@ -90,6 +91,8 @@
     font-size: $balloon-tooltip-content-font-size;
     font-weight: $balloon-tooltip-content-font-weight;
     z-index: 0;
+    word-wrap: break-all;
+    word-wrap: break-word;
 
     @include tooltip-state(
         $balloon-tooltip-color,

diff --git a/src/balloon/tooltip.jsx b/src/balloon/tooltip.jsx
@@ -82,11 +82,16 @@ export default class Tooltip extends React.Component {
          * 弹层id, 传入值才会支持无障碍
          */
         id: PropTypes.string,
+        /**
+         * 如果需要让 Tooltip 内容可被点击，可以设置这个参数，例如 100
+         */
+        delay: PropTypes.number,
     };
     static defaultProps = {
         triggerType: 'hover',
         prefix: 'next-',
         align: 'b',
+        delay: 0,
         trigger: <span />,
     };
 
@@ -108,6 +113,7 @@ export default class Tooltip extends React.Component {
             autoFocus,
             alignEdge,
             rtl,
+            delay,
             ...others
         } = this.props;
 
@@ -171,7 +177,7 @@ export default class Tooltip extends React.Component {
                 triggerType={newTriggerType}
                 align={alignMap[align].align}
                 offset={_offset}
-                delay={0}
+                delay={delay}
                 className={popupClassName}
                 style={popupStyle}
                 rtl={rtl}