Revert tooltip (#391)

* Revert "Fix tooltip wrapper (#388)"

This reverts commit a27e6b9.

* Revert "tooltip使用popper定位 (#369)"

This reverts commit c277fe8.

* Bump version to 2.0.5-alpha.3

packages/react-impression/package.json

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

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

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Popper from 'popper.js'
 
 export default class Tooltip extends React.PureComponent {
   static propTypes = {
@@ -24,51 +23,71 @@ export default class Tooltip extends React.PureComponent {
     position: 'right',
   }
 
-  createTooltip() {
+  createTooltip(targetRect) {
     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}`
+    tooltipNode.className = `tooltip ${positionClass}`
     arrowNode.className = 'tooltip-arrow'
-    innerNode.className = 'tooltip-text'
+    innerNode.className = 'tooltip-inner'
 
     innerNode.innerHTML = content
-    tooltipContentNode.appendChild(arrowNode)
-    tooltipContentNode.appendChild(innerNode)
-    tooltipNode.appendChild(tooltipContentNode)
+    tooltipNode.appendChild(arrowNode)
+    tooltipNode.appendChild(innerNode)
 
     document.body.appendChild(tooltipNode)
 
+    const tooltipRect = tooltipNode.getBoundingClientRect()
+
+    /**
+     * switch - 计算left、top
+     *
+     * @param  {type} position 位置
+     */
+    switch (position) {
+      case 'top':
+        tooltipNode.style.top = `${targetRect.top - tooltipRect.height - 10}px`
+        tooltipNode.style.left = `${targetRect.left -
+          (tooltipRect.width - targetRect.width) / 2}px`
+        break
+      case 'left':
+        tooltipNode.style.left = `${targetRect.left - tooltipRect.width - 10}px`
+        tooltipNode.style.top = `${targetRect.top +
+          (targetRect.height - tooltipRect.height) / 2}px`
+        break
+      case 'right':
+        tooltipNode.style.left = `${targetRect.left + targetRect.width + 10}px`
+        tooltipNode.style.top = `${targetRect.top +
+          (targetRect.height - tooltipRect.height) / 2}px`
+        break
+      default:
+        tooltipNode.style.top = `${targetRect.top + targetRect.height + 10}px`
+        tooltipNode.style.left = `${targetRect.left -
+          (tooltipRect.width - targetRect.width) / 2}px`
+        break
+    }
+
+    tooltipNode.classList.add('in')
     this.tooltip = tooltipNode
   }
 
   /**
    * 显示tooltip
    */
   onMouseOver = event => {
-    const { position } = this.props
-    this.createTooltip()
-    this.tooltipPopper = new Popper(event.target, this.tooltip, {
-      positionFixed: true,
-      placement: position,
-      modifiers: {
-        offset: { offset: '0, 10' },
-      },
-    })
+    const rect = event.target.getBoundingClientRect()
+
+    this.createTooltip(rect)
   }
 
   /**
    * 移除tooltip
    */
   onMouseOut = () => {
     document.body.removeChild(this.tooltip)
-    this.tooltipPopper.destroy()
-    this.tooltipPopper = null
   }
 
   render() {

packages/react-impression/src/styles/modules/_tooltip.scss

@@ -1,8 +1,21 @@
 // Base class
 .tooltip {
+  position: fixed;
   z-index: $zindex-tooltip;
+  display: block;
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  font-size: $font-size-base;
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+  transition: $tooltip-transition;
 
-  &[x-placement^="top"] {
+  &.in {
+    opacity: $tooltip-opacity;
+  }
+
+  &.tooltip-top {
     padding-bottom: $tooltip-arrow-width;
 
     .tooltip-arrow {
@@ -14,20 +27,20 @@
     }
   }
 
-  &[x-placement^="right"] {
+  &.tooltip-right {
     padding-left: $tooltip-arrow-width;
 
     .tooltip-arrow {
       top: 50%;
       left: 0;
       margin-top: -$tooltip-arrow-width;
       border-width: $tooltip-arrow-width $tooltip-arrow-width
-      $tooltip-arrow-width 0;
+        $tooltip-arrow-width 0;
       border-right-color: $tooltip-arrow-color;
     }
   }
 
-  &[x-placement^="bottom"] {
+  &.tooltip-bottom {
     padding-top: $tooltip-arrow-width;
 
     .tooltip-arrow {
@@ -39,30 +52,22 @@
     }
   }
 
-  &[x-placement^="left"] {
+  &.tooltip-left {
     padding-right: $tooltip-arrow-width;
 
     .tooltip-arrow {
       top: 50%;
       right: 0;
       margin-top: -$tooltip-arrow-width;
       border-width: $tooltip-arrow-width 0 $tooltip-arrow-width
-      $tooltip-arrow-width;
+        $tooltip-arrow-width;
       border-left-color: $tooltip-arrow-color;
     }
   }
 }
-.tooltip-inner {
-  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
-  // So reset our font and text properties to avoid inheriting weird values.
-  font-size: $font-size-base;
-  // Allow breaking very long words so they don't overflow the tooltip's bounds
-  word-wrap: break-word;
-  animation: $tooltip-animation;
-}
 
 // Wrapper for the tooltip content
-.tooltip-text {
+.tooltip-inner {
   max-width: $tooltip-max-width;
   padding: $tooltip-padding-y $tooltip-padding-x;
   color: $tooltip-color;
@@ -80,12 +85,3 @@
   border-color: transparent;
   border-style: solid;
 }
-@keyframes tooltipFadeIn {
-  0% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: $tooltip-opacity;
-  }
-}

packages/react-impression/src/styles/variables/_tooltip.scss

@@ -13,4 +13,4 @@ $tooltip-offset: rem(10px) !default;
 $tooltip-arrow-width: rem(5px) !default;
 $tooltip-arrow-color: $tooltip-bg !default;
 
-$tooltip-animation: 0.36s tooltipFadeIn cubic-bezier(0.4, 0, 0.2, 1) forwards !default;
+$tooltip-transition: all 0.36s cubic-bezier(0.4, 0, 0.2, 1) !default;