Fix tooltip wrapper (#388)

* U tooltip使用popper定位

* U 优化箭头朝向

* U tooltip改造

* Revert "U tooltip改造"

This reverts commit 0bd6409.

* Bump version to 2.0.5-alpha.1

packages/react-impression/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-impression",
-  "version": "2.0.4",
+  "version": "2.0.5-alpha.1",
   "author": "NewDadaFE",
   "description": "UI Components with React.",
   "sideEffects": false,

packages/react-impression/src/components/Tooltip/Tooltip.js

@@ -1,7 +1,5 @@
 import React from 'react'
-import { Portal } from 'react-portal'
 import PropTypes from 'prop-types'
-import classnames from 'classnames'
 import Popper from 'popper.js'
 
 export default class Tooltip extends React.PureComponent {
@@ -26,71 +24,70 @@ export default class Tooltip extends React.PureComponent {
     position: 'right',
   }
 
-  state = {
-    showTip: false,
+  createTooltip() {
+    const { position, content } = this.props
+    const positionClass = `tooltip-${position}`
+    const tooltipNode = document.createElement('div')
+    const tooltipContentNode = document.createElement('div')
+    const arrowNode = document.createElement('div')
+    const innerNode = document.createElement('div')
+
+    tooltipNode.className = 'tooltip'
+    tooltipContentNode.className = `tooltip-inner ${positionClass}`
+    arrowNode.className = 'tooltip-arrow'
+    innerNode.className = 'tooltip-text'
+
+    innerNode.innerHTML = content
+    tooltipContentNode.appendChild(arrowNode)
+    tooltipContentNode.appendChild(innerNode)
+    tooltipNode.appendChild(tooltipContentNode)
+
+    document.body.appendChild(tooltipNode)
+
+    this.tooltip = tooltipNode
   }
 
   /**
    * 显示tooltip
    */
   onMouseOver = event => {
     const { position } = this.props
-    if (!this.popper) {
-      this.popper = new Popper(event.target, this.tooltip, {
-        positionFixed: true,
-        placement: position,
-        modifiers: {
-          offset: { offset: '0, 10' },
-        },
-      })
-    }
-    this.setState({ showTip: true })
+    this.createTooltip()
+    this.tooltipPopper = new Popper(event.target, this.tooltip, {
+      positionFixed: true,
+      placement: position,
+      modifiers: {
+        offset: { offset: '0, 10' },
+      },
+    })
   }
 
   /**
    * 移除tooltip
    */
   onMouseOut = () => {
-    this.setState({ showTip: false })
+    document.body.removeChild(this.tooltip)
+    this.tooltipPopper.destroy()
+    this.tooltipPopper = null
   }
 
-  componentWillUnmount() {
-    this.popper && this.popper.destroy()
-    this.popper = null
-  }
-
-  setTooltipRef = element => (this.tooltip = element)
-
   render() {
-    const { position, content, children } = this.props
+    const { children } = this.props
     const { onMouseOver, onMouseOut } = children.props
 
-    return (
-      <div>
-        {React.cloneElement(children, {
-          onMouseOver: event => {
-            onMouseOver && onMouseOver()
-            this.onMouseOver(event)
-          },
-          onMouseOut: event => {
-            onMouseOut && onMouseOut()
-            this.onMouseOut(event)
-          },
-        })}
-        <Portal>
-          <div
-            className={classnames('tooltip', {
-              hidden: !this.state.showTip,
-            })}
-            ref={this.setTooltipRef}
-          >
-            <div className={`tooltip-inner tooltip-${position}`}>
-              <div className='tooltip-arrow' />
-              <div className='tooltip-text'>{content}</div>
-            </div>
-          </div>
-        </Portal>
-      </div>
-    )
+    return React.cloneElement(children, {
+      onMouseOver: onMouseOver
+        ? event => {
+          onMouseOver()
+          this.onMouseOver(event)
+        }
+        : this.onMouseOver,
+      onMouseOut: onMouseOut
+        ? event => {
+          onMouseOut()
+          this.onMouseOut(event)
+        }
+        : this.onMouseOut,
+    })
   }
 }