diff --git a/packages/react-impression/package.json b/packages/react-impression/package.json index 622aa58bf..cf0737d39 100644 --- a/packages/react-impression/package.json +++ b/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, diff --git a/packages/react-impression/src/components/Tooltip/Tooltip.js b/packages/react-impression/src/components/Tooltip/Tooltip.js index 5241e5fa7..f08dcbea7 100644 --- a/packages/react-impression/src/components/Tooltip/Tooltip.js +++ b/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,26 +23,54 @@ 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 } @@ -51,15 +78,9 @@ export default class Tooltip extends React.PureComponent { * 显示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) } /** @@ -67,8 +88,6 @@ export default class Tooltip extends React.PureComponent { */ onMouseOut = () => { document.body.removeChild(this.tooltip) - this.tooltipPopper.destroy() - this.tooltipPopper = null } render() { diff --git a/packages/react-impression/src/styles/modules/_tooltip.scss b/packages/react-impression/src/styles/modules/_tooltip.scss index c93ab78b9..e322223c9 100755 --- a/packages/react-impression/src/styles/modules/_tooltip.scss +++ b/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,7 +27,7 @@ } } - &[x-placement^="right"] { + &.tooltip-right { padding-left: $tooltip-arrow-width; .tooltip-arrow { @@ -22,12 +35,12 @@ 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,7 +52,7 @@ } } - &[x-placement^="left"] { + &.tooltip-left { padding-right: $tooltip-arrow-width; .tooltip-arrow { @@ -47,22 +60,14 @@ 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; - } -} diff --git a/packages/react-impression/src/styles/variables/_tooltip.scss b/packages/react-impression/src/styles/variables/_tooltip.scss index dbccc3e41..5dde0f56e 100644 --- a/packages/react-impression/src/styles/variables/_tooltip.scss +++ b/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;