fix: Tooltip support multi children, close: #3924 (#4105)

ant-design · Dec 2, 2016 · a939769 · a939769
1 parent f3ffae9
commit a939769
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md
@@ -1,6 +1,6 @@
 ---
 order: 0
-title: 
+title:
   zh-CN: 基本
   en-US: Basic
 ---
@@ -9,7 +9,7 @@ title:
 
 最简单的用法。
 
-## en-US 
+## en-US
 
 The simplest usage.
 
@@ -18,7 +18,7 @@ import { Tooltip } from 'antd';
 
 ReactDOM.render(
   <Tooltip title="prompt text">
-    <span>Text will show when mouse enter.</span>
+    <span>Tooltip will show when mouse enter.</span>
   </Tooltip>
 , mountNode);
 ````
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
@@ -124,8 +124,9 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
       visible = false;
     }
 
-    const childrenProps = children.props;
-    const childrenCls = classNames(childrenProps.className, {
+    const child = React.isValidElement(children) ? children : <span>{children}</span>;
+    const childProps = child.props;
+    const childCls = classNames(childProps.className, {
       [openClassName || `${prefixCls}-open`]: true,
     });
 
@@ -139,7 +140,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
         onVisibleChange={this.onVisibleChange}
         onPopupAlign={this.onPopupAlign}
       >
-        {visible ? cloneElement(children, { className: childrenCls }) : children}
+        {visible ? cloneElement(child, { className: childCls }) : child}
       </RcTooltip>
     );
   }

diff --git a/tests/tooltip/__snapshots__/demo.test.js.snap b/tests/tooltip/__snapshots__/demo.test.js.snap
@@ -19,7 +19,7 @@ exports[`test renders ./components/tooltip/demo/arrow-point-at-center.md correct
 
 exports[`test renders ./components/tooltip/demo/basic.md correctly 1`] = `
 <span>
-  Text will show when mouse enter.
+  Tooltip will show when mouse enter.
 </span>
 `;