From 79342cec63d7c5e8b429dd1917396177b1e8ab09 Mon Sep 17 00:00:00 2001 From: Robert Gary Date: Fri, 24 Aug 2018 13:58:43 -0700 Subject: [PATCH] feat(tooltip): Add ability to hover on tooltip. Provide optional delay of updating so if the mouse p issue 411 --- README.md | 1 + example/src/index.js | 61 ++++++ example/src/index.scss | 12 ++ src/index.js | 151 ++++++++++---- src/index.scss | 3 + src/style.css | 2 +- src/style.js | 2 +- standalone/react-tooltip.js | 344 ++++++++++++++++---------------- standalone/react-tooltip.min.js | 4 +- 9 files changed, 364 insertions(+), 216 deletions(-) diff --git a/README.md b/README.md index f12028b0b..d3bff2eae 100644 --- a/README.md +++ b/README.md @@ -67,6 +67,7 @@ className | data-class | String | | extra custom class, can use !importan html | data-html | Bool | true, false | `

` or `` delayHide | data-delay-hide | Number | | `

` or `` delayShow | data-delay-show | Number | | `

` or `` + delayUpdate | data-delay-update | Number | | `

` or `` Sets a delay in calling getContent if the tooltip is already shown and you mouse over another target insecure | null | Bool | true, false | Whether to inject the style header into the page dynamically (violates CSP style-src but is a convenient default) border | data-border | Bool | true, false | Add one pixel white border getContent | null | Func or Array | (dataTip) => {}, [(dataTip) => {}, Interval] | Generate the tip content dynamically diff --git a/example/src/index.js b/example/src/index.js index 7a6a32994..62879b158 100755 --- a/example/src/index.js +++ b/example/src/index.js @@ -323,6 +323,67 @@ class Test extends React.Component { +
+

Demonstrate using mouse in tooltip.

+

Notice that the tooltip delays going away so you can get your mouse in it. You must set delayUpdate and delayHide for the tooltip to stay long enough to get your mouse over it.

+

+
+ + + + + + + + + +

This little buddy is {dataTip}

Put mouse here

} + effect='solid' + delayHide={500} + delayShow={500} + delayUpdate={500} + place={'right'} + border={true} + type={'light'} + + /> +
+
+
+              
+

{"(❂‿❂)"}

{"(❂‿❂)..."}

{ + "(❂‿❂)\n" + + " \n"}{ + "

This little buddy is {dataTip}

Put mouse here

}\n" + + " effect='solid'\n" + + " delayHide={500}\n" + + " delayShow={500}\n" + + " delayUpdate={500}\n" + + " place={'right'}\n" + + " border={true}\n" + + " type={'light'}"}

+
+
+
+ ) diff --git a/example/src/index.scss b/example/src/index.scss index 7af637d32..557c66acf 100755 --- a/example/src/index.scss +++ b/example/src/index.scss @@ -157,6 +157,18 @@ html, body{ height: 0; visibility: hidden; } + .block { + float: left; + $width: 55px; + + a { + text-align: center; + width: $width; + height: $width; + border: 1px solid #999; + border-radius: 0px + } + } .side { width: 50%; float: left; diff --git a/src/index.js b/src/index.js index 597e4d432..be7d1843d 100644 --- a/src/index.js +++ b/src/index.js @@ -44,6 +44,7 @@ class ReactTooltip extends React.Component { id: PropTypes.string, html: PropTypes.bool, delayHide: PropTypes.number, + delayUpdate: PropTypes.number, delayShow: PropTypes.number, event: PropTypes.string, eventOff: PropTypes.string, @@ -101,12 +102,14 @@ class ReactTooltip extends React.Component { 'globalRebuild', 'globalShow', 'globalHide', - 'onWindowResize' + 'onWindowResize', + 'mouseOnToolTip' ]) this.mount = true this.delayShowLoop = null this.delayHideLoop = null + this.delayReshow = null this.intervalUpdateContent = null } @@ -150,6 +153,22 @@ class ReactTooltip extends React.Component { this.unbindWindowEvents() } + /** + * Return if the mouse is on the tooltip. + * @returns {boolean} true - mouse is on the tooltip + */ + mouseOnToolTip () { + const {show} = this.state + + if (show && this.tooltipRef) { + /* old IE work around */ + if (!this.tooltipRef.matches) { + this.tooltipRef.matches = this.tooltipRef.msMatchesSelector + } + return this.tooltipRef.matches(':hover') + } + return false + } /** * Pick out corresponded target elements */ @@ -280,57 +299,72 @@ class ReactTooltip extends React.Component { // To prevent previously created timers from triggering this.clearTimer() - this.setState({ - originTooltip: originTooltip, - isMultiline: isMultiline, - desiredPlace: e.currentTarget.getAttribute('data-place') || this.props.place || 'top', - place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top', - type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark', - effect: switchToSolid && 'solid' || this.getEffect(e.currentTarget), - offset: e.currentTarget.getAttribute('data-offset') || this.props.offset || {}, - html: e.currentTarget.getAttribute('data-html') - ? e.currentTarget.getAttribute('data-html') === 'true' - : (this.props.html || false), - delayShow: e.currentTarget.getAttribute('data-delay-show') || this.props.delayShow || 0, - delayHide: e.currentTarget.getAttribute('data-delay-hide') || this.props.delayHide || 0, - border: e.currentTarget.getAttribute('data-border') - ? e.currentTarget.getAttribute('data-border') === 'true' - : (this.props.border || false), - extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || this.props.className || '', - disable: e.currentTarget.getAttribute('data-tip-disable') - ? e.currentTarget.getAttribute('data-tip-disable') === 'true' - : (this.props.disable || false), - currentTarget: e.currentTarget - }, () => { - if (scrollHide) this.addScrollListener(this.state.currentTarget) - this.updateTooltip(e) - - if (getContent && Array.isArray(getContent)) { - this.intervalUpdateContent = setInterval(() => { - if (this.mount) { - const {getContent} = this.props - const placeholder = getTipContent(originTooltip, '', getContent[0](), isMultiline) - const isEmptyTip = this.isEmptyTip(placeholder) - this.setState({ - isEmptyTip - }) - this.updatePosition() - } - }, getContent[1]) - } - }) + var target = e.currentTarget + + var reshowDelay = this.state.show ? target.getAttribute('data-delay-update') || this.props.delayUpdate : 0 + + var self = this + + var updateState = function updateState () { + self.setState({ + originTooltip: originTooltip, + isMultiline: isMultiline, + desiredPlace: target.getAttribute('data-place') || self.props.place || 'top', + place: target.getAttribute('data-place') || self.props.place || 'top', + type: target.getAttribute('data-type') || self.props.type || 'dark', + effect: switchToSolid && 'solid' || self.getEffect(target), + offset: target.getAttribute('data-offset') || self.props.offset || {}, + html: target.getAttribute('data-html') ? target.getAttribute('data-html') === 'true' : self.props.html || false, + delayShow: target.getAttribute('data-delay-show') || self.props.delayShow || 0, + delayHide: target.getAttribute('data-delay-hide') || self.props.delayHide || 0, + delayUpdate: target.getAttribute('data-delay-update') || self.props.delayUpdate || 0, + border: target.getAttribute('data-border') ? target.getAttribute('data-border') === 'true' : self.props.border || false, + extraClass: target.getAttribute('data-class') || self.props.class || self.props.className || '', + disable: target.getAttribute('data-tip-disable') ? target.getAttribute('data-tip-disable') === 'true' : self.props.disable || false, + currentTarget: target + }, () => { + if (scrollHide) self.addScrollListener(self.state.currentTarget) + self.updateTooltip(e) + + if (getContent && Array.isArray(getContent)) { + this.intervalUpdateContent = setInterval(() => { + if (self.mount) { + const {getContent} = this.props + const placeholder = getTipContent(originTooltip, '', getContent[0](), isMultiline) + const isEmptyTip = this.isEmptyTip(placeholder) + self.setState({ + isEmptyTip + }) + self.updatePosition() + } + }, getContent[1]) + } + }) + } + + // If there is no delay call immediately, don't allow events to get in first. + if (reshowDelay) { + this.delayReshow = setTimeout(updateState, reshowDelay) + } else { + updateState() + } } /** * When mouse hover, updatetooltip */ updateTooltip (e) { - const {delayShow, show, disable} = this.state + const {delayShow, disable} = this.state const {afterShow} = this.props const placeholder = this.getTooltipContent() - const delayTime = show ? 0 : parseInt(delayShow, 10) + const delayTime = parseInt(delayShow, 10) const eventTarget = e.currentTarget || e.target + // Check if the mouse is actually over the tooltip, if so don't hide the tooltip + if (this.mouseOnToolTip()) { + return + } + if (this.isEmptyTip(placeholder) || disable) return // if the tooltip is empty, disable the tooltip const updateState = () => { if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) { @@ -354,6 +388,25 @@ class ReactTooltip extends React.Component { } } + /* + * If we're mousing over the tooltip remove it when we leave. + */ + listenForTooltipExit () { + const {show} = this.state + + if (show && this.tooltipRef) { + this.tooltipRef.addEventListener('mouseleave', this.hideTooltip) + } + } + + removeListenerForTooltipExit () { + const {show} = this.state + + if (show && this.tooltipRef) { + this.tooltipRef.removeEventListener('mouseleave', this.hideTooltip) + } + } + /** * When mouse leave, hide tooltip */ @@ -369,8 +422,16 @@ class ReactTooltip extends React.Component { const isMyElement = targetArray.some(ele => ele === e.currentTarget) if (!isMyElement || !this.state.show) return } + const resetState = () => { const isVisible = this.state.show + // Check if the mouse is actually over the tooltip, if so don't hide the tooltip + if (this.mouseOnToolTip()) { + this.listenForTooltipExit() + return + } + this.removeListenerForTooltipExit() + this.setState({ show: false }, () => { @@ -437,6 +498,7 @@ class ReactTooltip extends React.Component { clearTimer () { clearTimeout(this.delayShowLoop) clearTimeout(this.delayHideLoop) + clearTimeout(this.delayReshow) clearInterval(this.intervalUpdateContent) } @@ -457,7 +519,8 @@ class ReactTooltip extends React.Component { {'type-warning': this.state.type === 'warning'}, {'type-error': this.state.type === 'error'}, {'type-info': this.state.type === 'info'}, - {'type-light': this.state.type === 'light'} + {'type-light': this.state.type === 'light'}, + {'allow_hover': this.props.delayUpdate} ) let Wrapper = this.props.wrapper @@ -469,6 +532,7 @@ class ReactTooltip extends React.Component { return ( this.tooltipRef = ref} {...ariaProps} data-id='tooltip' dangerouslySetInnerHTML={{__html: placeholder}}/> @@ -478,6 +542,7 @@ class ReactTooltip extends React.Component { this.tooltipRef = ref} data-id='tooltip'>{placeholder} ) } diff --git a/src/index.scss b/src/index.scss index d7d3d8453..5be5ab3b7 100644 --- a/src/index.scss +++ b/src/index.scss @@ -67,6 +67,9 @@ top: -999em; visibility: hidden; z-index: 999; + &.allow_hover { + pointer-events:auto; + } &:before, &:after { content: ""; diff --git a/src/style.css b/src/style.css index b56fff184..a4525e168 100644 --- a/src/style.css +++ b/src/style.css @@ -1 +1 @@ -.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center} +.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip.allow_hover{pointer-events:auto}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center} diff --git a/src/style.js b/src/style.js index 9f8e31e38..add240605 100644 --- a/src/style.js +++ b/src/style.js @@ -1 +1 @@ -export default '.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}' \ No newline at end of file +export default '.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip.allow_hover{pointer-events:auto}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}' \ No newline at end of file diff --git a/standalone/react-tooltip.js b/standalone/react-tooltip.js index c8a00b5a8..fc665de61 100644 --- a/standalone/react-tooltip.js +++ b/standalone/react-tooltip.js @@ -1312,6 +1312,7 @@ var customListeners = { var map = target[this.id]; map[event] = listener; } else { + // this is workaround for WeakMap, which is not supported in older browsers, such as IE Object.defineProperty(target, this.id, { configurable: true, value: _defineProperty({}, event, listener) @@ -1652,11 +1653,12 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de isMultiline: false }; - _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'getTooltipContent', 'globalRebuild', 'globalShow', 'globalHide', 'onWindowResize']); + _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'getTooltipContent', 'globalRebuild', 'globalShow', 'globalHide', 'onWindowResize', 'mouseOnToolTip']); _this.mount = true; _this.delayShowLoop = null; _this.delayHideLoop = null; + _this.delayReshow = null; _this.intervalUpdateContent = null; return _this; } @@ -1714,6 +1716,26 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de this.unbindWindowEvents(); } + /** + * Return if the mouse is on the tooltip. + * @returns {boolean} true - mouse is on the tooltip + */ + + }, { + key: 'mouseOnToolTip', + value: function mouseOnToolTip() { + var show = this.state.show; + + + if (show && this.tooltipRef) { + /* old IE work around */ + if (!this.tooltipRef.matches) { + this.tooltipRef.matches = this.tooltipRef.msMatchesSelector; + } + return this.tooltipRef.matches(':hover'); + } + return false; + } /** * Pick out corresponded target elements */ @@ -1848,8 +1870,6 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de }, { key: 'showTooltip', value: function showTooltip(e, isGlobalCall) { - var _this5 = this; - if (isGlobalCall) { // Don't trigger other elements belongs to other ReactTooltip var targetArray = this.getTargetArray(this.props.id); @@ -1881,40 +1901,58 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de // To prevent previously created timers from triggering this.clearTimer(); - this.setState({ - originTooltip: originTooltip, - isMultiline: isMultiline, - desiredPlace: e.currentTarget.getAttribute('data-place') || this.props.place || 'top', - place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top', - type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark', - effect: switchToSolid && 'solid' || this.getEffect(e.currentTarget), - offset: e.currentTarget.getAttribute('data-offset') || this.props.offset || {}, - html: e.currentTarget.getAttribute('data-html') ? e.currentTarget.getAttribute('data-html') === 'true' : this.props.html || false, - delayShow: e.currentTarget.getAttribute('data-delay-show') || this.props.delayShow || 0, - delayHide: e.currentTarget.getAttribute('data-delay-hide') || this.props.delayHide || 0, - border: e.currentTarget.getAttribute('data-border') ? e.currentTarget.getAttribute('data-border') === 'true' : this.props.border || false, - extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || this.props.className || '', - disable: e.currentTarget.getAttribute('data-tip-disable') ? e.currentTarget.getAttribute('data-tip-disable') === 'true' : this.props.disable || false, - currentTarget: e.currentTarget - }, function () { - if (scrollHide) _this5.addScrollListener(_this5.state.currentTarget); - _this5.updateTooltip(e); - - if (getContent && Array.isArray(getContent)) { - _this5.intervalUpdateContent = setInterval(function () { - if (_this5.mount) { - var _getContent = _this5.props.getContent; - - var placeholder = (0, _getTipContent2.default)(originTooltip, '', _getContent[0](), isMultiline); - var isEmptyTip = _this5.isEmptyTip(placeholder); - _this5.setState({ - isEmptyTip: isEmptyTip - }); - _this5.updatePosition(); - } - }, getContent[1]); - } - }); + var target = e.currentTarget; + + var reshowDelay = this.state.show ? target.getAttribute('data-delay-update') || this.props.delayUpdate : 0; + + var self = this; + + var updateState = function updateState() { + var _this5 = this; + + self.setState({ + originTooltip: originTooltip, + isMultiline: isMultiline, + desiredPlace: target.getAttribute('data-place') || self.props.place || 'top', + place: target.getAttribute('data-place') || self.props.place || 'top', + type: target.getAttribute('data-type') || self.props.type || 'dark', + effect: switchToSolid && 'solid' || self.getEffect(target), + offset: target.getAttribute('data-offset') || self.props.offset || {}, + html: target.getAttribute('data-html') ? target.getAttribute('data-html') === 'true' : self.props.html || false, + delayShow: target.getAttribute('data-delay-show') || self.props.delayShow || 0, + delayHide: target.getAttribute('data-delay-hide') || self.props.delayHide || 0, + delayUpdate: target.getAttribute('data-delay-update') || self.props.delayUpdate || 0, + border: target.getAttribute('data-border') ? target.getAttribute('data-border') === 'true' : self.props.border || false, + extraClass: target.getAttribute('data-class') || self.props.class || self.props.className || '', + disable: target.getAttribute('data-tip-disable') ? target.getAttribute('data-tip-disable') === 'true' : self.props.disable || false, + currentTarget: target + }, function () { + if (scrollHide) self.addScrollListener(self.state.currentTarget); + self.updateTooltip(e); + + if (getContent && Array.isArray(getContent)) { + _this5.intervalUpdateContent = setInterval(function () { + if (self.mount) { + var _getContent = _this5.props.getContent; + + var placeholder = (0, _getTipContent2.default)(originTooltip, '', _getContent[0](), isMultiline); + var isEmptyTip = _this5.isEmptyTip(placeholder); + self.setState({ + isEmptyTip: isEmptyTip + }); + self.updatePosition(); + } + }, getContent[1]); + } + }); + }; + + // If there is no delay call immediately, don't allow events to get in first. + if (reshowDelay) { + this.delayReshow = setTimeout(updateState, reshowDelay); + } else { + updateState(); + } } /** @@ -1928,14 +1966,18 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de var _state = this.state, delayShow = _state.delayShow, - show = _state.show, disable = _state.disable; var afterShow = this.props.afterShow; var placeholder = this.getTooltipContent(); - var delayTime = show ? 0 : parseInt(delayShow, 10); + var delayTime = parseInt(delayShow, 10); var eventTarget = e.currentTarget || e.target; + // Check if the mouse is actually over the tooltip, if so don't hide the tooltip + if (this.mouseOnToolTip()) { + return; + } + if (this.isEmptyTip(placeholder) || disable) return; // if the tooltip is empty, disable the tooltip var updateState = function updateState() { if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) { @@ -1959,6 +2001,31 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de } } + /* + * If we're mousing over the tooltip remove it when we leave. + */ + + }, { + key: 'listenForTooltipExit', + value: function listenForTooltipExit() { + var show = this.state.show; + + + if (show && this.tooltipRef) { + this.tooltipRef.addEventListener('mouseleave', this.hideTooltip); + } + } + }, { + key: 'removeListenerForTooltipExit', + value: function removeListenerForTooltipExit() { + var show = this.state.show; + + + if (show && this.tooltipRef) { + this.tooltipRef.removeEventListener('mouseleave', this.hideTooltip); + } + } + /** * When mouse leave, hide tooltip */ @@ -1984,8 +2051,16 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de }); if (!isMyElement || !this.state.show) return; } + var resetState = function resetState() { var isVisible = _this7.state.show; + // Check if the mouse is actually over the tooltip, if so don't hide the tooltip + if (_this7.mouseOnToolTip()) { + _this7.listenForTooltipExit(); + return; + } + _this7.removeListenerForTooltipExit(); + _this7.setState({ show: false }, function () { @@ -2074,11 +2149,14 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de value: function clearTimer() { clearTimeout(this.delayShowLoop); clearTimeout(this.delayHideLoop); + clearTimeout(this.delayReshow); clearInterval(this.intervalUpdateContent); } }, { key: 'render', value: function render() { + var _this9 = this; + var _state4 = this.state, extraClass = _state4.extraClass, html = _state4.html, @@ -2087,7 +2165,7 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de var placeholder = this.getTooltipContent(); var isEmptyTip = this.isEmptyTip(placeholder); - var tooltipClass = (0, _classnames2.default)('__react_component_tooltip', { 'show': this.state.show && !disable && !isEmptyTip }, { 'border': this.state.border }, { 'place-top': this.state.place === 'top' }, { 'place-bottom': this.state.place === 'bottom' }, { 'place-left': this.state.place === 'left' }, { 'place-right': this.state.place === 'right' }, { 'type-dark': this.state.type === 'dark' }, { 'type-success': this.state.type === 'success' }, { 'type-warning': this.state.type === 'warning' }, { 'type-error': this.state.type === 'error' }, { 'type-info': this.state.type === 'info' }, { 'type-light': this.state.type === 'light' }); + var tooltipClass = (0, _classnames2.default)('__react_component_tooltip', { 'show': this.state.show && !disable && !isEmptyTip }, { 'border': this.state.border }, { 'place-top': this.state.place === 'top' }, { 'place-bottom': this.state.place === 'bottom' }, { 'place-left': this.state.place === 'left' }, { 'place-right': this.state.place === 'right' }, { 'type-dark': this.state.type === 'dark' }, { 'type-success': this.state.type === 'success' }, { 'type-warning': this.state.type === 'warning' }, { 'type-error': this.state.type === 'error' }, { 'type-info': this.state.type === 'info' }, { 'type-light': this.state.type === 'light' }, { 'allow_hover': this.props.delayUpdate }); var Wrapper = this.props.wrapper; if (ReactTooltip.supportedWrappers.indexOf(Wrapper) < 0) { @@ -2096,7 +2174,10 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de if (html) { return _react2.default.createElement(Wrapper, _extends({ className: tooltipClass + ' ' + extraClass, - id: this.props.id + id: this.props.id, + ref: function ref(_ref) { + return _this9.tooltipRef = _ref; + } }, ariaProps, { 'data-id': 'tooltip', dangerouslySetInnerHTML: { __html: placeholder } })); @@ -2106,6 +2187,9 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de _extends({ className: tooltipClass + ' ' + extraClass, id: this.props.id }, ariaProps, { + ref: function ref(_ref2) { + return _this9.tooltipRef = _ref2; + }, 'data-id': 'tooltip' }), placeholder ); @@ -2128,6 +2212,7 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de id: _propTypes2.default.string, html: _propTypes2.default.bool, delayHide: _propTypes2.default.number, + delayUpdate: _propTypes2.default.number, delayShow: _propTypes2.default.number, event: _propTypes2.default.string, eventOff: _propTypes2.default.string, @@ -2159,7 +2244,7 @@ module.exports = ReactTooltip; Object.defineProperty(exports, "__esModule", { value: true }); -exports.default = '.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}'; +exports.default = '.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip.allow_hover{pointer-events:auto}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}'; },{}],21:[function(require,module,exports){ "use strict"; @@ -2240,146 +2325,67 @@ exports.default = function (e, target, node, place, desiredPlace, effect, offset return mouseY + offset_Y + extraOffset_Y; }; - // Judge if the tooltip has over the window(screen) - var outsideVertical = function outsideVertical() { - var result = false; - var newPlace = void 0; - if (getTipOffsetTop('left') < 0 && getTipOffsetBottom('left') <= windowHeight && getTipOffsetBottom('bottom') <= windowHeight) { - result = true; - newPlace = 'bottom'; - } else if (getTipOffsetBottom('left') > windowHeight && getTipOffsetTop('left') >= 0 && getTipOffsetTop('top') >= 0) { - result = true; - newPlace = 'top'; - } - return { result: result, newPlace: newPlace }; + // + // Functions to test whether the tooltip's sides are inside + // the client window for a given orientation p + // + // _____________ + // | | <-- Right side + // | p = 'left' |\ + // | |/ |\ + // |_____________| |_\ <-- Mouse + // / \ | + // | + // | + // Bottom side + // + var outsideLeft = function outsideLeft(p) { + return getTipOffsetLeft(p) < 0; }; - var outsideLeft = function outsideLeft() { - var _outsideVertical = outsideVertical(), - result = _outsideVertical.result, - newPlace = _outsideVertical.newPlace; // Deal with vertical as first priority - - - if (result && outsideHorizontal().result) { - return { result: false // No need to change, if change to vertical will out of space - }; - } - if (!result && getTipOffsetLeft('left') < 0 && getTipOffsetRight('right') <= windowWidth) { - result = true; // If vertical ok, but let out of side and right won't out of side - newPlace = 'right'; - } - return { result: result, newPlace: newPlace }; + var outsideRight = function outsideRight(p) { + return getTipOffsetRight(p) > windowWidth; }; - var outsideRight = function outsideRight() { - var _outsideVertical2 = outsideVertical(), - result = _outsideVertical2.result, - newPlace = _outsideVertical2.newPlace; - - if (result && outsideHorizontal().result) { - return { result: false // No need to change, if change to vertical will out of space - }; - } - if (!result && getTipOffsetRight('right') > windowWidth && getTipOffsetLeft('left') >= 0) { - result = true; - newPlace = 'left'; - } - return { result: result, newPlace: newPlace }; + var outsideTop = function outsideTop(p) { + return getTipOffsetTop(p) < 0; }; - - var outsideHorizontal = function outsideHorizontal() { - var result = false; - var newPlace = void 0; - if (getTipOffsetLeft('top') < 0 && getTipOffsetRight('top') <= windowWidth && getTipOffsetRight('right') <= windowWidth) { - result = true; - newPlace = 'right'; - } else if (getTipOffsetRight('top') > windowWidth && getTipOffsetLeft('top') >= 0 && getTipOffsetLeft('left') >= 0) { - result = true; - newPlace = 'left'; - } - return { result: result, newPlace: newPlace }; + var outsideBottom = function outsideBottom(p) { + return getTipOffsetBottom(p) > windowHeight; }; - var outsideTop = function outsideTop() { - var _outsideHorizontal = outsideHorizontal(), - result = _outsideHorizontal.result, - newPlace = _outsideHorizontal.newPlace; - if (result && outsideVertical().result) { - return { result: false }; - } - if (!result && getTipOffsetTop('top') < 0 && getTipOffsetBottom('bottom') <= windowHeight) { - result = true; - newPlace = 'bottom'; - } - return { result: result, newPlace: newPlace }; + // Check whether the tooltip with orientation p is completely inside the client window + var outside = function outside(p) { + return outsideLeft(p) || outsideRight(p) || outsideTop(p) || outsideBottom(p); + }; + var inside = function inside(p) { + return !outside(p); }; - var outsideBottom = function outsideBottom() { - var _outsideHorizontal2 = outsideHorizontal(), - result = _outsideHorizontal2.result, - newPlace = _outsideHorizontal2.newPlace; - if (result && outsideVertical().result) { - return { result: false }; - } - if (!result && getTipOffsetBottom('bottom') > windowHeight && getTipOffsetTop('top') >= 0) { - result = true; - newPlace = 'top'; + var placesList = ['top', 'bottom', 'left', 'right']; + var insideList = []; + for (var i = 0; i < 4; i++) { + var p = placesList[i]; + if (inside(p)) { + insideList.push(p); } - return { result: result, newPlace: newPlace }; - }; + } - // Return new state to change the placement to the reverse if possible - var outsideLeftResult = outsideLeft(); - var outsideRightResult = outsideRight(); - var outsideTopResult = outsideTop(); - var outsideBottomResult = outsideBottom(); + var isNewState = false; + var newPlace = void 0; + if (inside(desiredPlace) && desiredPlace !== place) { + isNewState = true; + newPlace = desiredPlace; + } else if (insideList.length > 0 && outside(desiredPlace) && outside(place)) { + isNewState = true; + newPlace = insideList[0]; + } - if (place === 'left' && outsideLeftResult.result) { - return { - isNewState: true, - newState: { place: outsideLeftResult.newPlace } - }; - } else if (place === 'right' && outsideRightResult.result) { - return { - isNewState: true, - newState: { place: outsideRightResult.newPlace } - }; - } else if (place === 'top' && outsideTopResult.result) { - return { - isNewState: true, - newState: { place: outsideTopResult.newPlace } - }; - } else if (place === 'bottom' && outsideBottomResult.result) { + if (isNewState) { return { isNewState: true, - newState: { place: outsideBottomResult.newPlace } + newState: { place: newPlace } }; } - // Change back to original place if possible - if (place !== desiredPlace) { - if (desiredPlace === 'top' && !outsideTopResult.result) { - return { - isNewState: true, - newState: { place: 'top' } - }; - } else if (desiredPlace === 'left' && !outsideLeftResult.result) { - return { - isNewState: true, - newState: { place: 'left' } - }; - } else if (desiredPlace === 'right' && !outsideRightResult.result) { - return { - isNewState: true, - newState: { place: 'right' } - }; - } else if (desiredPlace === 'bottom' && !outsideBottomResult.result) { - return { - isNewState: true, - newState: { place: 'bottom' } - }; - } - } - - // Return tooltip offset position return { isNewState: false, position: { @@ -2412,10 +2418,10 @@ var getDimensions = function getDimensions(node) { * - `effect` {String} float / solid * - `offset` {Object} the offset to default position * - * @return {Object + * @return {Object} * - `isNewState` {Bool} required * - `newState` {Object} - * - `position` {OBject} {left: {Number}, top: {Number}} + * - `position` {Object} {left: {Number}, top: {Number}} */ var getCurrentOffset = function getCurrentOffset(e, currentTarget, effect) { var boundingClientRect = currentTarget.getBoundingClientRect(); diff --git a/standalone/react-tooltip.min.js b/standalone/react-tooltip.min.js index 0ada54e2e..781cf9d41 100644 --- a/standalone/react-tooltip.min.js +++ b/standalone/react-tooltip.min.js @@ -1,2 +1,2 @@ -(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactTooltip=f()}})(function(){var define,module,exports;return function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key]}var argIndex=0;var message="Warning: "+format.replace(/%s/g,function(){return args[argIndex++]});if(typeof console!=="undefined"){console.error(message)}try{throw new Error(message)}catch(x){}};warning=function warning(condition,format){if(format===undefined){throw new Error("`warning(condition, format, ...args)` requires a warning "+"message argument")}if(format.indexOf("Failed Composite propType: ")===0){return}if(!condition){for(var _len2=arguments.length,args=Array(_len2>2?_len2-2:0),_key2=2;_key2<_len2;_key2++){args[_key2-2]=arguments[_key2]}printWarning.apply(undefined,[format].concat(args))}}}module.exports=warning}).call(this,require("_process"))},{"./emptyFunction":2,_process:6}],5:[function(require,module,exports){"use strict";var getOwnPropertySymbols=Object.getOwnPropertySymbols;var hasOwnProperty=Object.prototype.hasOwnProperty;var propIsEnumerable=Object.prototype.propertyIsEnumerable;function toObject(val){if(val===null||val===undefined){throw new TypeError("Object.assign cannot be called with null or undefined")}return Object(val)}function shouldUseNative(){try{if(!Object.assign){return false}var test1=new String("abc");test1[5]="de";if(Object.getOwnPropertyNames(test1)[0]==="5"){return false}var test2={};for(var i=0;i<10;i++){test2["_"+String.fromCharCode(i)]=i}var order2=Object.getOwnPropertyNames(test2).map(function(n){return test2[n]});if(order2.join("")!=="0123456789"){return false}var test3={};"abcdefghijklmnopqrst".split("").forEach(function(letter){test3[letter]=letter});if(Object.keys(Object.assign({},test3)).join("")!=="abcdefghijklmnopqrst"){return false}return true}catch(err){return false}}module.exports=shouldUseNative()?Object.assign:function(target,source){var from;var to=toObject(target);var symbols;for(var s=1;s1){for(var i=1;i0||placeholder){var isInvisible=!_this6.state.show;_this6.setState({currentEvent:e,currentTarget:eventTarget,show:true},function(){_this6.updatePosition();if(isInvisible&&afterShow)afterShow()})}};clearTimeout(this.delayShowLoop);if(delayShow){this.delayShowLoop=setTimeout(updateState,delayTime)}else{updateState()}}},{key:"hideTooltip",value:function hideTooltip(e,hasTarget){var _this7=this;var _state2=this.state,delayHide=_state2.delayHide,disable=_state2.disable;var afterHide=this.props.afterHide;var placeholder=this.getTooltipContent();if(!this.mount)return;if(this.isEmptyTip(placeholder)||disable)return;if(hasTarget){var targetArray=this.getTargetArray(this.props.id);var isMyElement=targetArray.some(function(ele){return ele===e.currentTarget});if(!isMyElement||!this.state.show)return}var resetState=function resetState(){var isVisible=_this7.state.show;_this7.setState({show:false},function(){_this7.removeScrollListener();if(isVisible&&afterHide)afterHide()})};this.clearTimer();if(delayHide){this.delayHideLoop=setTimeout(resetState,parseInt(delayHide,10))}else{resetState()}}},{key:"addScrollListener",value:function addScrollListener(currentTarget){var isCaptureMode=this.isCapture(currentTarget);window.addEventListener("scroll",this.hideTooltip,isCaptureMode)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"updatePosition",value:function updatePosition(){var _this8=this;var _state3=this.state,currentEvent=_state3.currentEvent,currentTarget=_state3.currentTarget,place=_state3.place,desiredPlace=_state3.desiredPlace,effect=_state3.effect,offset=_state3.offset;var node=_reactDom2.default.findDOMNode(this);var result=(0,_getPosition2.default)(currentEvent,currentTarget,node,place,desiredPlace,effect,offset);if(result.isNewState){return this.setState(result.newState,function(){_this8.updatePosition()})}node.style.left=result.position.left+"px";node.style.top=result.position.top+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){var head=document.getElementsByTagName("head")[0];if(!head.querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;head.insertBefore(tag,head.firstChild)}}},{key:"clearTimer",value:function clearTimer(){clearTimeout(this.delayShowLoop);clearTimeout(this.delayHideLoop);clearInterval(this.intervalUpdateContent)}},{key:"render",value:function render(){var _state4=this.state,extraClass=_state4.extraClass,html=_state4.html,ariaProps=_state4.ariaProps,disable=_state4.disable;var placeholder=this.getTooltipContent();var isEmptyTip=this.isEmptyTip(placeholder);var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show&&!disable&&!isEmptyTip},{border:this.state.border},{"place-top":this.state.place==="top"},{"place-bottom":this.state.place==="bottom"},{"place-left":this.state.place==="left"},{"place-right":this.state.place==="right"},{"type-dark":this.state.type==="dark"},{"type-success":this.state.type==="success"},{"type-warning":this.state.type==="warning"},{"type-error":this.state.type==="error"},{"type-info":this.state.type==="info"},{"type-light":this.state.type==="light"});var Wrapper=this.props.wrapper;if(ReactTooltip.supportedWrappers.indexOf(Wrapper)<0){Wrapper=ReactTooltip.defaultProps.wrapper}if(html){return _react2.default.createElement(Wrapper,_extends({className:tooltipClass+" "+extraClass,id:this.props.id},ariaProps,{"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}}))}else{return _react2.default.createElement(Wrapper,_extends({className:tooltipClass+" "+extraClass,id:this.props.id},ariaProps,{"data-id":"tooltip"}),placeholder)}}}]);return ReactTooltip}(_react2.default.Component),_class2.propTypes={children:_propTypes2.default.any,place:_propTypes2.default.string,type:_propTypes2.default.string,effect:_propTypes2.default.string,offset:_propTypes2.default.object,multiline:_propTypes2.default.bool,border:_propTypes2.default.bool,insecure:_propTypes2.default.bool,class:_propTypes2.default.string,className:_propTypes2.default.string,id:_propTypes2.default.string,html:_propTypes2.default.bool,delayHide:_propTypes2.default.number,delayShow:_propTypes2.default.number,event:_propTypes2.default.string,eventOff:_propTypes2.default.string,watchWindow:_propTypes2.default.bool,isCapture:_propTypes2.default.bool,globalEventOff:_propTypes2.default.string,getContent:_propTypes2.default.any,afterShow:_propTypes2.default.func,afterHide:_propTypes2.default.func,disable:_propTypes2.default.bool,scrollHide:_propTypes2.default.bool,resizeHide:_propTypes2.default.bool,wrapper:_propTypes2.default.string},_class2.defaultProps={insecure:true,resizeHide:true,wrapper:"div"},_class2.supportedWrappers=["div","span"],_class2.displayName="ReactTooltip",_temp))||_class)||_class)||_class)||_class)||_class)||_class;module.exports=ReactTooltip}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"./decorators/customEvent":13,"./decorators/getEffect":14,"./decorators/isCapture":15,"./decorators/staticMethods":16,"./decorators/trackRemoval":17,"./decorators/windowListener":18,"./style":20,"./utils/aria":21,"./utils/getPosition":22,"./utils/getTipContent":23,"./utils/nodeListToArray":24,classnames:1,"prop-types":10}],20:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default='.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}'},{}],21:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.parseAria=parseAria;function parseAria(props){var ariaObj={};Object.keys(props).filter(function(prop){return/(^aria-\w+$|^role$)/.test(prop)}).forEach(function(prop){ariaObj[prop]=props[prop]});return ariaObj}},{}],22:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=function(e,target,node,place,desiredPlace,effect,offset){var _getDimensions=getDimensions(node),tipWidth=_getDimensions.width,tipHeight=_getDimensions.height;var _getDimensions2=getDimensions(target),targetWidth=_getDimensions2.width,targetHeight=_getDimensions2.height;var _getCurrentOffset=getCurrentOffset(e,target,effect),mouseX=_getCurrentOffset.mouseX,mouseY=_getCurrentOffset.mouseY;var defaultOffset=getDefaultPosition(effect,targetWidth,targetHeight,tipWidth,tipHeight);var _calculateOffset=calculateOffset(offset),extraOffset_X=_calculateOffset.extraOffset_X,extraOffset_Y=_calculateOffset.extraOffset_Y;var windowWidth=window.innerWidth;var windowHeight=window.innerHeight;var _getParent=getParent(node),parentTop=_getParent.parentTop,parentLeft=_getParent.parentLeft;var getTipOffsetLeft=function getTipOffsetLeft(place){var offset_X=defaultOffset[place].l;return mouseX+offset_X+extraOffset_X};var getTipOffsetRight=function getTipOffsetRight(place){var offset_X=defaultOffset[place].r;return mouseX+offset_X+extraOffset_X};var getTipOffsetTop=function getTipOffsetTop(place){var offset_Y=defaultOffset[place].t;return mouseY+offset_Y+extraOffset_Y};var getTipOffsetBottom=function getTipOffsetBottom(place){var offset_Y=defaultOffset[place].b;return mouseY+offset_Y+extraOffset_Y};var outsideVertical=function outsideVertical(){var result=false;var newPlace=void 0;if(getTipOffsetTop("left")<0&&getTipOffsetBottom("left")<=windowHeight&&getTipOffsetBottom("bottom")<=windowHeight){result=true;newPlace="bottom"}else if(getTipOffsetBottom("left")>windowHeight&&getTipOffsetTop("left")>=0&&getTipOffsetTop("top")>=0){result=true;newPlace="top"}return{result:result,newPlace:newPlace}};var outsideLeft=function outsideLeft(){var _outsideVertical=outsideVertical(),result=_outsideVertical.result,newPlace=_outsideVertical.newPlace;if(result&&outsideHorizontal().result){return{result:false}}if(!result&&getTipOffsetLeft("left")<0&&getTipOffsetRight("right")<=windowWidth){result=true;newPlace="right"}return{result:result,newPlace:newPlace}};var outsideRight=function outsideRight(){var _outsideVertical2=outsideVertical(),result=_outsideVertical2.result,newPlace=_outsideVertical2.newPlace;if(result&&outsideHorizontal().result){return{result:false}}if(!result&&getTipOffsetRight("right")>windowWidth&&getTipOffsetLeft("left")>=0){result=true;newPlace="left"}return{result:result,newPlace:newPlace}};var outsideHorizontal=function outsideHorizontal(){var result=false;var newPlace=void 0;if(getTipOffsetLeft("top")<0&&getTipOffsetRight("top")<=windowWidth&&getTipOffsetRight("right")<=windowWidth){result=true;newPlace="right"}else if(getTipOffsetRight("top")>windowWidth&&getTipOffsetLeft("top")>=0&&getTipOffsetLeft("left")>=0){result=true;newPlace="left"}return{result:result,newPlace:newPlace}};var outsideTop=function outsideTop(){var _outsideHorizontal=outsideHorizontal(),result=_outsideHorizontal.result,newPlace=_outsideHorizontal.newPlace;if(result&&outsideVertical().result){return{result:false}}if(!result&&getTipOffsetTop("top")<0&&getTipOffsetBottom("bottom")<=windowHeight){result=true;newPlace="bottom"}return{result:result,newPlace:newPlace}};var outsideBottom=function outsideBottom(){var _outsideHorizontal2=outsideHorizontal(),result=_outsideHorizontal2.result,newPlace=_outsideHorizontal2.newPlace;if(result&&outsideVertical().result){return{result:false}}if(!result&&getTipOffsetBottom("bottom")>windowHeight&&getTipOffsetTop("top")>=0){result=true;newPlace="top"}return{result:result,newPlace:newPlace}};var outsideLeftResult=outsideLeft();var outsideRightResult=outsideRight();var outsideTopResult=outsideTop();var outsideBottomResult=outsideBottom();if(place==="left"&&outsideLeftResult.result){return{isNewState:true,newState:{place:outsideLeftResult.newPlace}}}else if(place==="right"&&outsideRightResult.result){return{isNewState:true,newState:{place:outsideRightResult.newPlace}}}else if(place==="top"&&outsideTopResult.result){return{isNewState:true,newState:{place:outsideTopResult.newPlace}}}else if(place==="bottom"&&outsideBottomResult.result){return{isNewState:true,newState:{place:outsideBottomResult.newPlace}}}if(place!==desiredPlace){if(desiredPlace==="top"&&!outsideTopResult.result){return{isNewState:true,newState:{place:"top"}}}else if(desiredPlace==="left"&&!outsideLeftResult.result){return{isNewState:true,newState:{place:"left"}}}else if(desiredPlace==="right"&&!outsideRightResult.result){return{isNewState:true,newState:{place:"right"}}}else if(desiredPlace==="bottom"&&!outsideBottomResult.result){return{isNewState:true,newState:{place:"bottom"}}}}return{isNewState:false,position:{left:parseInt(getTipOffsetLeft(place)-parentLeft,10),top:parseInt(getTipOffsetTop(place)-parentTop,10)}}};var getDimensions=function getDimensions(node){var _node$getBoundingClie=node.getBoundingClientRect(),height=_node$getBoundingClie.height,width=_node$getBoundingClie.width;return{height:parseInt(height,10),width:parseInt(width,10)}};var getCurrentOffset=function getCurrentOffset(e,currentTarget,effect){var boundingClientRect=currentTarget.getBoundingClientRect();var targetTop=boundingClientRect.top;var targetLeft=boundingClientRect.left;var _getDimensions3=getDimensions(currentTarget),targetWidth=_getDimensions3.width,targetHeight=_getDimensions3.height;if(effect==="float"){return{mouseX:e.clientX,mouseY:e.clientY}}return{mouseX:targetLeft+targetWidth/2,mouseY:targetTop+targetHeight/2}};var getDefaultPosition=function getDefaultPosition(effect,targetWidth,targetHeight,tipWidth,tipHeight){var top=void 0;var right=void 0;var bottom=void 0;var left=void 0;var disToMouse=3;var triangleHeight=2;var cursorHeight=12;if(effect==="float"){top={l:-(tipWidth/2),r:tipWidth/2,t:-(tipHeight+disToMouse+triangleHeight),b:-disToMouse};bottom={l:-(tipWidth/2),r:tipWidth/2,t:disToMouse+cursorHeight,b:tipHeight+disToMouse+triangleHeight+cursorHeight};left={l:-(tipWidth+disToMouse+triangleHeight),r:-disToMouse,t:-(tipHeight/2),b:tipHeight/2};right={l:disToMouse,r:tipWidth+disToMouse+triangleHeight,t:-(tipHeight/2),b:tipHeight/2}}else if(effect==="solid"){top={l:-(tipWidth/2),r:tipWidth/2,t:-(targetHeight/2+tipHeight+triangleHeight),b:-(targetHeight/2)};bottom={l:-(tipWidth/2),r:tipWidth/2,t:targetHeight/2,b:targetHeight/2+tipHeight+triangleHeight};left={l:-(tipWidth+targetWidth/2+triangleHeight),r:-(targetWidth/2),t:-(tipHeight/2),b:tipHeight/2};right={l:targetWidth/2,r:tipWidth+targetWidth/2+triangleHeight,t:-(tipHeight/2),b:tipHeight/2}}return{top:top,bottom:bottom,left:left,right:right}};var calculateOffset=function calculateOffset(offset){var extraOffset_X=0;var extraOffset_Y=0;if(Object.prototype.toString.apply(offset)==="[object String]"){offset=JSON.parse(offset.toString().replace(/\'/g,'"'))}for(var key in offset){if(key==="top"){extraOffset_Y-=parseInt(offset[key],10)}else if(key==="bottom"){extraOffset_Y+=parseInt(offset[key],10)}else if(key==="left"){extraOffset_X-=parseInt(offset[key],10)}else if(key==="right"){extraOffset_X+=parseInt(offset[key],10)}}return{extraOffset_X:extraOffset_X,extraOffset_Y:extraOffset_Y}};var getParent=function getParent(currentTarget){var currentParent=currentTarget;while(currentParent){if(window.getComputedStyle(currentParent).getPropertyValue("transform")!=="none")break;currentParent=currentParent.parentElement}var parentTop=currentParent&¤tParent.getBoundingClientRect().top||0;var parentLeft=currentParent&¤tParent.getBoundingClientRect().left||0;return{parentTop:parentTop,parentLeft:parentLeft}}},{}],23:[function(require,module,exports){(function(global){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=function(tip,children,getContent,multiline){if(children)return children;if(getContent!==undefined&&getContent!==null)return getContent;if(getContent===null)return null;var regexp=//;if(!multiline||multiline==="false"||!regexp.test(tip)){return tip}return tip.split(regexp).map(function(d,i){return _react2.default.createElement("span",{key:i,className:"multi-line"},d)})};var _react=typeof window!=="undefined"?window["React"]:typeof global!=="undefined"?global["React"]:null;var _react2=_interopRequireDefault(_react);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}],24:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=function(nodeList){var length=nodeList.length;if(nodeList.hasOwnProperty){return Array.prototype.slice.call(nodeList)}return new Array(length).fill().map(function(index){return nodeList[index]})}},{}]},{},[19])(19)}); +(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.ReactTooltip=f()}})(function(){var define,module,exports;return function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i1?_len-1:0),_key=1;_key<_len;_key++){args[_key-1]=arguments[_key]}var argIndex=0;var message="Warning: "+format.replace(/%s/g,function(){return args[argIndex++]});if(typeof console!=="undefined"){console.error(message)}try{throw new Error(message)}catch(x){}};warning=function warning(condition,format){if(format===undefined){throw new Error("`warning(condition, format, ...args)` requires a warning "+"message argument")}if(format.indexOf("Failed Composite propType: ")===0){return}if(!condition){for(var _len2=arguments.length,args=Array(_len2>2?_len2-2:0),_key2=2;_key2<_len2;_key2++){args[_key2-2]=arguments[_key2]}printWarning.apply(undefined,[format].concat(args))}}}module.exports=warning}).call(this,require("_process"))},{"./emptyFunction":2,_process:6}],5:[function(require,module,exports){"use strict";var getOwnPropertySymbols=Object.getOwnPropertySymbols;var hasOwnProperty=Object.prototype.hasOwnProperty;var propIsEnumerable=Object.prototype.propertyIsEnumerable;function toObject(val){if(val===null||val===undefined){throw new TypeError("Object.assign cannot be called with null or undefined")}return Object(val)}function shouldUseNative(){try{if(!Object.assign){return false}var test1=new String("abc");test1[5]="de";if(Object.getOwnPropertyNames(test1)[0]==="5"){return false}var test2={};for(var i=0;i<10;i++){test2["_"+String.fromCharCode(i)]=i}var order2=Object.getOwnPropertyNames(test2).map(function(n){return test2[n]});if(order2.join("")!=="0123456789"){return false}var test3={};"abcdefghijklmnopqrst".split("").forEach(function(letter){test3[letter]=letter});if(Object.keys(Object.assign({},test3)).join("")!=="abcdefghijklmnopqrst"){return false}return true}catch(err){return false}}module.exports=shouldUseNative()?Object.assign:function(target,source){var from;var to=toObject(target);var symbols;for(var s=1;s1){for(var i=1;i0||placeholder){var isInvisible=!_this6.state.show;_this6.setState({currentEvent:e,currentTarget:eventTarget,show:true},function(){_this6.updatePosition();if(isInvisible&&afterShow)afterShow()})}};clearTimeout(this.delayShowLoop);if(delayShow){this.delayShowLoop=setTimeout(updateState,delayTime)}else{updateState()}}},{key:"listenForTooltipExit",value:function listenForTooltipExit(){var show=this.state.show;if(show&&this.tooltipRef){this.tooltipRef.addEventListener("mouseleave",this.hideTooltip)}}},{key:"removeListenerForTooltipExit",value:function removeListenerForTooltipExit(){var show=this.state.show;if(show&&this.tooltipRef){this.tooltipRef.removeEventListener("mouseleave",this.hideTooltip)}}},{key:"hideTooltip",value:function hideTooltip(e,hasTarget){var _this7=this;var _state2=this.state,delayHide=_state2.delayHide,disable=_state2.disable;var afterHide=this.props.afterHide;var placeholder=this.getTooltipContent();if(!this.mount)return;if(this.isEmptyTip(placeholder)||disable)return;if(hasTarget){var targetArray=this.getTargetArray(this.props.id);var isMyElement=targetArray.some(function(ele){return ele===e.currentTarget});if(!isMyElement||!this.state.show)return}var resetState=function resetState(){var isVisible=_this7.state.show;if(_this7.mouseOnToolTip()){_this7.listenForTooltipExit();return}_this7.removeListenerForTooltipExit();_this7.setState({show:false},function(){_this7.removeScrollListener();if(isVisible&&afterHide)afterHide()})};this.clearTimer();if(delayHide){this.delayHideLoop=setTimeout(resetState,parseInt(delayHide,10))}else{resetState()}}},{key:"addScrollListener",value:function addScrollListener(currentTarget){var isCaptureMode=this.isCapture(currentTarget);window.addEventListener("scroll",this.hideTooltip,isCaptureMode)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"updatePosition",value:function updatePosition(){var _this8=this;var _state3=this.state,currentEvent=_state3.currentEvent,currentTarget=_state3.currentTarget,place=_state3.place,desiredPlace=_state3.desiredPlace,effect=_state3.effect,offset=_state3.offset;var node=_reactDom2.default.findDOMNode(this);var result=(0,_getPosition2.default)(currentEvent,currentTarget,node,place,desiredPlace,effect,offset);if(result.isNewState){return this.setState(result.newState,function(){_this8.updatePosition()})}node.style.left=result.position.left+"px";node.style.top=result.position.top+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){var head=document.getElementsByTagName("head")[0];if(!head.querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;head.insertBefore(tag,head.firstChild)}}},{key:"clearTimer",value:function clearTimer(){clearTimeout(this.delayShowLoop);clearTimeout(this.delayHideLoop);clearTimeout(this.delayReshow);clearInterval(this.intervalUpdateContent)}},{key:"render",value:function render(){var _this9=this;var _state4=this.state,extraClass=_state4.extraClass,html=_state4.html,ariaProps=_state4.ariaProps,disable=_state4.disable;var placeholder=this.getTooltipContent();var isEmptyTip=this.isEmptyTip(placeholder);var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show&&!disable&&!isEmptyTip},{border:this.state.border},{"place-top":this.state.place==="top"},{"place-bottom":this.state.place==="bottom"},{"place-left":this.state.place==="left"},{"place-right":this.state.place==="right"},{"type-dark":this.state.type==="dark"},{"type-success":this.state.type==="success"},{"type-warning":this.state.type==="warning"},{"type-error":this.state.type==="error"},{"type-info":this.state.type==="info"},{"type-light":this.state.type==="light"},{allow_hover:this.props.delayUpdate});var Wrapper=this.props.wrapper;if(ReactTooltip.supportedWrappers.indexOf(Wrapper)<0){Wrapper=ReactTooltip.defaultProps.wrapper}if(html){return _react2.default.createElement(Wrapper,_extends({className:tooltipClass+" "+extraClass,id:this.props.id,ref:function ref(_ref){return _this9.tooltipRef=_ref}},ariaProps,{"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}}))}else{return _react2.default.createElement(Wrapper,_extends({className:tooltipClass+" "+extraClass,id:this.props.id},ariaProps,{ref:function ref(_ref2){return _this9.tooltipRef=_ref2},"data-id":"tooltip"}),placeholder)}}}]);return ReactTooltip}(_react2.default.Component),_class2.propTypes={children:_propTypes2.default.any,place:_propTypes2.default.string,type:_propTypes2.default.string,effect:_propTypes2.default.string,offset:_propTypes2.default.object,multiline:_propTypes2.default.bool,border:_propTypes2.default.bool,insecure:_propTypes2.default.bool,class:_propTypes2.default.string,className:_propTypes2.default.string,id:_propTypes2.default.string,html:_propTypes2.default.bool,delayHide:_propTypes2.default.number,delayUpdate:_propTypes2.default.number,delayShow:_propTypes2.default.number,event:_propTypes2.default.string,eventOff:_propTypes2.default.string,watchWindow:_propTypes2.default.bool,isCapture:_propTypes2.default.bool,globalEventOff:_propTypes2.default.string,getContent:_propTypes2.default.any,afterShow:_propTypes2.default.func,afterHide:_propTypes2.default.func,disable:_propTypes2.default.bool,scrollHide:_propTypes2.default.bool,resizeHide:_propTypes2.default.bool,wrapper:_propTypes2.default.string},_class2.defaultProps={insecure:true,resizeHide:true,wrapper:"div"},_class2.supportedWrappers=["div","span"],_class2.displayName="ReactTooltip",_temp))||_class)||_class)||_class)||_class)||_class)||_class;module.exports=ReactTooltip}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{"./decorators/customEvent":13,"./decorators/getEffect":14,"./decorators/isCapture":15,"./decorators/staticMethods":16,"./decorators/trackRemoval":17,"./decorators/windowListener":18,"./style":20,"./utils/aria":21,"./utils/getPosition":22,"./utils/getTipContent":23,"./utils/nodeListToArray":24,classnames:1,"prop-types":10}],20:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default='.__react_component_tooltip{border-radius:3px;display:inline-block;font-size:13px;left:-999em;opacity:0;padding:8px 21px;position:fixed;pointer-events:none;transition:opacity 0.3s ease-out;top:-999em;visibility:hidden;z-index:999}.__react_component_tooltip.allow_hover{pointer-events:auto}.__react_component_tooltip:before,.__react_component_tooltip:after{content:"";width:0;height:0;position:absolute}.__react_component_tooltip.show{opacity:0.9;margin-top:0px;margin-left:0px;visibility:visible}.__react_component_tooltip.type-dark{color:#fff;background-color:#222}.__react_component_tooltip.type-dark.place-top:after{border-top-color:#222;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom-color:#222;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-dark.place-left:after{border-left-color:#222;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-dark.place-right:after{border-right-color:#222;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-dark.border{border:1px solid #fff}.__react_component_tooltip.type-dark.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-dark.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-dark.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-dark.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-success{color:#fff;background-color:#8DC572}.__react_component_tooltip.type-success.place-top:after{border-top-color:#8DC572;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-success.place-bottom:after{border-bottom-color:#8DC572;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-success.place-left:after{border-left-color:#8DC572;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-success.place-right:after{border-right-color:#8DC572;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-success.border{border:1px solid #fff}.__react_component_tooltip.type-success.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-success.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-success.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-success.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-warning{color:#fff;background-color:#F0AD4E}.__react_component_tooltip.type-warning.place-top:after{border-top-color:#F0AD4E;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom-color:#F0AD4E;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-warning.place-left:after{border-left-color:#F0AD4E;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-warning.place-right:after{border-right-color:#F0AD4E;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-warning.border{border:1px solid #fff}.__react_component_tooltip.type-warning.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-warning.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-warning.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-warning.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-error{color:#fff;background-color:#BE6464}.__react_component_tooltip.type-error.place-top:after{border-top-color:#BE6464;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-error.place-bottom:after{border-bottom-color:#BE6464;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-error.place-left:after{border-left-color:#BE6464;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-error.place-right:after{border-right-color:#BE6464;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-error.border{border:1px solid #fff}.__react_component_tooltip.type-error.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-error.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-error.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-error.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-info{color:#fff;background-color:#337AB7}.__react_component_tooltip.type-info.place-top:after{border-top-color:#337AB7;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-info.place-bottom:after{border-bottom-color:#337AB7;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-info.place-left:after{border-left-color:#337AB7;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-info.place-right:after{border-right-color:#337AB7;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-info.border{border:1px solid #fff}.__react_component_tooltip.type-info.border.place-top:before{border-top:8px solid #fff}.__react_component_tooltip.type-info.border.place-bottom:before{border-bottom:8px solid #fff}.__react_component_tooltip.type-info.border.place-left:before{border-left:8px solid #fff}.__react_component_tooltip.type-info.border.place-right:before{border-right:8px solid #fff}.__react_component_tooltip.type-light{color:#222;background-color:#fff}.__react_component_tooltip.type-light.place-top:after{border-top-color:#fff;border-top-style:solid;border-top-width:6px}.__react_component_tooltip.type-light.place-bottom:after{border-bottom-color:#fff;border-bottom-style:solid;border-bottom-width:6px}.__react_component_tooltip.type-light.place-left:after{border-left-color:#fff;border-left-style:solid;border-left-width:6px}.__react_component_tooltip.type-light.place-right:after{border-right-color:#fff;border-right-style:solid;border-right-width:6px}.__react_component_tooltip.type-light.border{border:1px solid #222}.__react_component_tooltip.type-light.border.place-top:before{border-top:8px solid #222}.__react_component_tooltip.type-light.border.place-bottom:before{border-bottom:8px solid #222}.__react_component_tooltip.type-light.border.place-left:before{border-left:8px solid #222}.__react_component_tooltip.type-light.border.place-right:before{border-right:8px solid #222}.__react_component_tooltip.place-top{margin-top:-10px}.__react_component_tooltip.place-top:before{border-left:10px solid transparent;border-right:10px solid transparent;bottom:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-top:after{border-left:8px solid transparent;border-right:8px solid transparent;bottom:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-bottom{margin-top:10px}.__react_component_tooltip.place-bottom:before{border-left:10px solid transparent;border-right:10px solid transparent;top:-8px;left:50%;margin-left:-10px}.__react_component_tooltip.place-bottom:after{border-left:8px solid transparent;border-right:8px solid transparent;top:-6px;left:50%;margin-left:-8px}.__react_component_tooltip.place-left{margin-left:-10px}.__react_component_tooltip.place-left:before{border-top:6px solid transparent;border-bottom:6px solid transparent;right:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-left:after{border-top:5px solid transparent;border-bottom:5px solid transparent;right:-6px;top:50%;margin-top:-4px}.__react_component_tooltip.place-right{margin-left:10px}.__react_component_tooltip.place-right:before{border-top:6px solid transparent;border-bottom:6px solid transparent;left:-8px;top:50%;margin-top:-5px}.__react_component_tooltip.place-right:after{border-top:5px solid transparent;border-bottom:5px solid transparent;left:-6px;top:50%;margin-top:-4px}.__react_component_tooltip .multi-line{display:block;padding:2px 0px;text-align:center}'},{}],21:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.parseAria=parseAria;function parseAria(props){var ariaObj={};Object.keys(props).filter(function(prop){return/(^aria-\w+$|^role$)/.test(prop)}).forEach(function(prop){ariaObj[prop]=props[prop]});return ariaObj}},{}],22:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=function(e,target,node,place,desiredPlace,effect,offset){var _getDimensions=getDimensions(node),tipWidth=_getDimensions.width,tipHeight=_getDimensions.height;var _getDimensions2=getDimensions(target),targetWidth=_getDimensions2.width,targetHeight=_getDimensions2.height;var _getCurrentOffset=getCurrentOffset(e,target,effect),mouseX=_getCurrentOffset.mouseX,mouseY=_getCurrentOffset.mouseY;var defaultOffset=getDefaultPosition(effect,targetWidth,targetHeight,tipWidth,tipHeight);var _calculateOffset=calculateOffset(offset),extraOffset_X=_calculateOffset.extraOffset_X,extraOffset_Y=_calculateOffset.extraOffset_Y;var windowWidth=window.innerWidth;var windowHeight=window.innerHeight;var _getParent=getParent(node),parentTop=_getParent.parentTop,parentLeft=_getParent.parentLeft;var getTipOffsetLeft=function getTipOffsetLeft(place){var offset_X=defaultOffset[place].l;return mouseX+offset_X+extraOffset_X};var getTipOffsetRight=function getTipOffsetRight(place){var offset_X=defaultOffset[place].r;return mouseX+offset_X+extraOffset_X};var getTipOffsetTop=function getTipOffsetTop(place){var offset_Y=defaultOffset[place].t;return mouseY+offset_Y+extraOffset_Y};var getTipOffsetBottom=function getTipOffsetBottom(place){var offset_Y=defaultOffset[place].b;return mouseY+offset_Y+extraOffset_Y};var outsideLeft=function outsideLeft(p){return getTipOffsetLeft(p)<0};var outsideRight=function outsideRight(p){return getTipOffsetRight(p)>windowWidth};var outsideTop=function outsideTop(p){return getTipOffsetTop(p)<0};var outsideBottom=function outsideBottom(p){return getTipOffsetBottom(p)>windowHeight};var outside=function outside(p){return outsideLeft(p)||outsideRight(p)||outsideTop(p)||outsideBottom(p)};var inside=function inside(p){return!outside(p)};var placesList=["top","bottom","left","right"];var insideList=[];for(var i=0;i<4;i++){var p=placesList[i];if(inside(p)){insideList.push(p)}}var isNewState=false;var newPlace=void 0;if(inside(desiredPlace)&&desiredPlace!==place){isNewState=true;newPlace=desiredPlace}else if(insideList.length>0&&outside(desiredPlace)&&outside(place)){isNewState=true;newPlace=insideList[0]}if(isNewState){return{isNewState:true,newState:{place:newPlace}}}return{isNewState:false,position:{left:parseInt(getTipOffsetLeft(place)-parentLeft,10),top:parseInt(getTipOffsetTop(place)-parentTop,10)}}};var getDimensions=function getDimensions(node){var _node$getBoundingClie=node.getBoundingClientRect(),height=_node$getBoundingClie.height,width=_node$getBoundingClie.width;return{height:parseInt(height,10),width:parseInt(width,10)}};var getCurrentOffset=function getCurrentOffset(e,currentTarget,effect){var boundingClientRect=currentTarget.getBoundingClientRect();var targetTop=boundingClientRect.top;var targetLeft=boundingClientRect.left;var _getDimensions3=getDimensions(currentTarget),targetWidth=_getDimensions3.width,targetHeight=_getDimensions3.height;if(effect==="float"){return{mouseX:e.clientX,mouseY:e.clientY}}return{mouseX:targetLeft+targetWidth/2,mouseY:targetTop+targetHeight/2}};var getDefaultPosition=function getDefaultPosition(effect,targetWidth,targetHeight,tipWidth,tipHeight){var top=void 0;var right=void 0;var bottom=void 0;var left=void 0;var disToMouse=3;var triangleHeight=2;var cursorHeight=12;if(effect==="float"){top={l:-(tipWidth/2),r:tipWidth/2,t:-(tipHeight+disToMouse+triangleHeight),b:-disToMouse};bottom={l:-(tipWidth/2),r:tipWidth/2,t:disToMouse+cursorHeight,b:tipHeight+disToMouse+triangleHeight+cursorHeight};left={l:-(tipWidth+disToMouse+triangleHeight),r:-disToMouse,t:-(tipHeight/2),b:tipHeight/2};right={l:disToMouse,r:tipWidth+disToMouse+triangleHeight,t:-(tipHeight/2),b:tipHeight/2}}else if(effect==="solid"){top={l:-(tipWidth/2),r:tipWidth/2,t:-(targetHeight/2+tipHeight+triangleHeight),b:-(targetHeight/2)};bottom={l:-(tipWidth/2),r:tipWidth/2,t:targetHeight/2,b:targetHeight/2+tipHeight+triangleHeight};left={l:-(tipWidth+targetWidth/2+triangleHeight),r:-(targetWidth/2),t:-(tipHeight/2),b:tipHeight/2};right={l:targetWidth/2,r:tipWidth+targetWidth/2+triangleHeight,t:-(tipHeight/2),b:tipHeight/2}}return{top:top,bottom:bottom,left:left,right:right}};var calculateOffset=function calculateOffset(offset){var extraOffset_X=0;var extraOffset_Y=0;if(Object.prototype.toString.apply(offset)==="[object String]"){offset=JSON.parse(offset.toString().replace(/\'/g,'"'))}for(var key in offset){if(key==="top"){extraOffset_Y-=parseInt(offset[key],10)}else if(key==="bottom"){extraOffset_Y+=parseInt(offset[key],10)}else if(key==="left"){extraOffset_X-=parseInt(offset[key],10)}else if(key==="right"){extraOffset_X+=parseInt(offset[key],10)}}return{extraOffset_X:extraOffset_X,extraOffset_Y:extraOffset_Y}};var getParent=function getParent(currentTarget){var currentParent=currentTarget;while(currentParent){if(window.getComputedStyle(currentParent).getPropertyValue("transform")!=="none")break;currentParent=currentParent.parentElement}var parentTop=currentParent&¤tParent.getBoundingClientRect().top||0;var parentLeft=currentParent&¤tParent.getBoundingClientRect().left||0;return{parentTop:parentTop,parentLeft:parentLeft}}},{}],23:[function(require,module,exports){(function(global){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=function(tip,children,getContent,multiline){if(children)return children;if(getContent!==undefined&&getContent!==null)return getContent;if(getContent===null)return null;var regexp=//;if(!multiline||multiline==="false"||!regexp.test(tip)){return tip}return tip.split(regexp).map(function(d,i){return _react2.default.createElement("span",{key:i,className:"multi-line"},d)})};var _react=typeof window!=="undefined"?window["React"]:typeof global!=="undefined"?global["React"]:null;var _react2=_interopRequireDefault(_react);function _interopRequireDefault(obj){return obj&&obj.__esModule?obj:{default:obj}}}).call(this,typeof global!=="undefined"?global:typeof self!=="undefined"?self:typeof window!=="undefined"?window:{})},{}],24:[function(require,module,exports){"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=function(nodeList){var length=nodeList.length;if(nodeList.hasOwnProperty){return Array.prototype.slice.call(nodeList)}return new Array(length).fill().map(function(index){return nodeList[index]})}},{}]},{},[19])(19)});