Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-tooltip-lite

Package Overview
Dependencies
Maintainers
2
Versions
34
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-tooltip-lite - npm Package Compare versions

Comparing version 1.8.0 to 1.9.1

35

dist/getDirection.js

@@ -20,6 +20,27 @@ 'use strict';

function checkTargetFullyVisible(target) {
var bottomOverhang = target.getBoundingClientRect().bottom > window.innerHeight;
var topOverhang = target.getBoundingClientRect().top < 0;
function checkTargetSufficientlyVisible(target, tip, props) {
var targetRect = target.getBoundingClientRect();
var bottomOverhang = targetRect.bottom > window.innerHeight;
var topOverhang = targetRect.top < 0;
// if the target is taller than the viewport (and we know there's sufficient left/right width before this is called),
// then go with the left/right direction as top/bottom will both be off screen
if (topOverhang && bottomOverhang) {
return true;
}
// if the target is bigger than the tip, we need to check if enough of the target is visible
if (target.offsetHeight > tip.offsetHeight) {
var halfTargetHeight = target.offsetHeight / 2;
var arrowClearance = props.arrowSize + _position.minArrowPadding;
var bottomOverhangAmount = targetRect.bottom - window.innerHeight;
var topOverhangAmount = -targetRect.top;
var targetCenterToBottomOfWindow = halfTargetHeight - bottomOverhangAmount;
var targetCenterToTopOfWindow = halfTargetHeight - topOverhangAmount;
return targetCenterToBottomOfWindow >= arrowClearance && targetCenterToTopOfWindow >= arrowClearance;
}
// otherwise just check that the whole target is visible
return !bottomOverhang && !topOverhang;

@@ -57,3 +78,3 @@ }

// if the window is not wide enough try top (which falls back to down)
if (!checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding) || !checkTargetFullyVisible(target)) {
if (!checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding) || !checkTargetSufficientlyVisible(target, tip, props)) {
return getDirection('up', tip, target, arrowSpacing, bodyPadding, arrowStyles, true);

@@ -70,3 +91,3 @@ }

// if the window is not wide enough try top (which falls back to down)
if (!checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding) || !checkTargetFullyVisible(target)) {
if (!checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding) || !checkTargetSufficientlyVisible(target, tip, props)) {
return getDirection('up', tip, target, arrowSpacing, bodyPadding, arrowStyles, true);

@@ -89,3 +110,3 @@ }

return 'down';
} else if (checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding)) {
} else if (!recursive && checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding)) {
return getDirection('right', tip, target, arrowSpacing, bodyPadding, arrowStyles, true);

@@ -109,3 +130,3 @@ }

// if there's not space above or below, check if there would be space left or right
} else if (checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding)) {
} else if (!recursive && checkLeftRightWidthSufficient(tip, target, arrowSpacing, bodyPadding)) {
return getDirection('right', tip, target, arrowSpacing, bodyPadding, arrowStyles, true);

@@ -112,0 +133,0 @@ }

24

dist/index.d.ts

@@ -6,21 +6,23 @@ declare module 'react-tooltip-lite' {

export interface TooltipProps {
tagName?: string;
direction?: string;
arrow?: boolean;
arrowSize?: number;
background?: string;
className?: string;
color?: string;
content: React.ReactNode;
background?: string;
color?: string;
padding?: string;
direction?: string;
distance?: number;
styles?: object;
eventOff?: string;
eventOn?: string;
eventToggle?: string;
forceDirection?: boolean;
hoverDelay?: number;
isOpen?: boolean;
padding?: string;
styles?: object;
tagName?: string;
tipContentHover?: boolean;
tipContentClassName?: string;
useHover?: boolean;
useDefaultStyles?: boolean;
isOpen?: boolean;
hoverDelay?: number;
tipContentHover?: boolean;
arrow?: boolean;
arrowSize?: number;
}

@@ -27,0 +29,0 @@

222

dist/index.js

@@ -43,2 +43,5 @@ 'use strict';

var resizeThrottle = 100;
var resizeThreshold = 5;
var stopProp = function stopProp(e) {

@@ -51,2 +54,9 @@ return e.stopPropagation();

_createClass(Tooltip, null, [{
key: 'getDerivedStateFromProps',
value: function getDerivedStateFromProps(nextProps) {
return nextProps.isOpen ? { hasBeenShown: true } : null;
}
}]);
function Tooltip() {

@@ -57,4 +67,8 @@ _classCallCheck(this, Tooltip);

_this.state = { showTip: false, hasHover: false, ignoreShow: false };
_this.debounceTimeout = false;
_this.hoverTimeout = false;
_this.state = { showTip: false, hasHover: false, ignoreShow: false, hasBeenShown: false };
_this.showTip = _this.showTip.bind(_this);

@@ -66,2 +80,4 @@ _this.hideTip = _this.hideTip.bind(_this);

_this.endHover = _this.endHover.bind(_this);
_this.listenResizeScroll = _this.listenResizeScroll.bind(_this);
_this.handleResizeScroll = _this.handleResizeScroll.bind(_this);
return _this;

@@ -79,7 +95,50 @@ }

}
window.addEventListener('resize', this.listenResizeScroll);
window.addEventListener('scroll', this.listenResizeScroll);
}
}, {
key: 'componentDidUpdate',
value: function componentDidUpdate(_, prevState) {
// older versions of react won't leverage getDerivedStateFromProps, TODO: remove when < 16.3 support is dropped
if (!this.state.hasBeenShown && this.props.isOpen) {
// eslint-disable-next-line react/no-did-update-set-state
this.setState({ hasBeenShown: true });
return setTimeout(this.showTip, 0);
}
// we need to render once to get refs in place, then we can make the calculations on a followup render
// this only has to happen the first time the tip is shown, and allows us to not render every tip on the page with initial render.
if (!prevState.hasBeenShown && this.state.hasBeenShown) {
this.showTip();
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
window.removeEventListener('resize', this.listenResizeScroll);
window.removeEventListener('scroll', this.listenResizeScroll);
clearTimeout(this.debounceTimeout);
}
}, {
key: 'listenResizeScroll',
value: function listenResizeScroll() {
clearTimeout(this.debounceTimeout);
this.debounceTimeout = setTimeout(this.handleResizeScroll, resizeThrottle);
}
}, {
key: 'handleResizeScroll',
value: function handleResizeScroll() {
if (this.state.showTip) {
// if we're showing the tip and the resize was actually a signifigant change, then setState to re-render and calculate position
var clientWidth = Math.round(document.documentElement.clientWidth / resizeThreshold) * resizeThreshold;
this.setState({ clientWidth: clientWidth });
}
}
}, {
key: 'toggleTip',
value: function toggleTip() {
this.setState({ showTip: !this.state.showTip });
this.state.showTip ? this.hideTip() : this.showTip();
}

@@ -89,2 +148,7 @@ }, {

value: function showTip() {
if (!this.state.hasBeenShown) {
// this will render once, then fire componentDidUpdate, which will show the tip
return this.setState({ hasBeenShown: true });
}
this.setState({ showTip: true });

@@ -104,3 +168,4 @@ }

setTimeout(this.checkHover, this.props.hoverDelay);
clearTimeout(this.hoverTimeout);
this.hoverTimeout = setTimeout(this.checkHover, this.props.hoverDelay);
}

@@ -113,3 +178,4 @@ }

setTimeout(this.checkHover, this.props.hoverDelay);
clearTimeout(this.hoverTimeout);
this.hoverTimeout = setTimeout(this.checkHover, this.props.hoverDelay);
}

@@ -119,3 +185,3 @@ }, {

value: function checkHover() {
this.setState({ showTip: this.state.hasHover });
this.state.hasHover ? this.showTip() : this.hideTip();
}

@@ -128,29 +194,27 @@ }, {

var _props = this.props,
direction = _props.direction,
arrow = _props.arrow,
arrowSize = _props.arrowSize,
background = _props.background,
className = _props.className,
padding = _props.padding,
children = _props.children,
color = _props.color,
content = _props.content,
styles = _props.styles,
direction = _props.direction,
distance = _props.distance,
eventOff = _props.eventOff,
eventOn = _props.eventOn,
eventOff = _props.eventOff,
eventToggle = _props.eventToggle,
useHover = _props.useHover,
background = _props.background,
color = _props.color,
useDefaultStyles = _props.useDefaultStyles,
forceDirection = _props.forceDirection,
isOpen = _props.isOpen,
padding = _props.padding,
styles = _props.styles,
TagName = _props.tagName,
tipContentHover = _props.tipContentHover,
arrow = _props.arrow,
arrowSize = _props.arrowSize,
distance = _props.distance;
tipContentClassName = _props.tipContentClassName,
useDefaultStyles = _props.useDefaultStyles,
useHover = _props.useHover;
var showTip = typeof isOpen === 'undefined' ? this.state.showTip : isOpen;
var currentPositions = (0, _position2.default)(direction, this.tip, this.target, _extends({}, this.state, { showTip: showTip }), {
background: useDefaultStyles ? defaultBg : background,
arrow: arrow,
arrowSize: arrowSize,
distance: distance
});
var isControlledByProps = !(typeof isOpen === 'undefined');
var showTip = isControlledByProps ? isOpen : this.state.showTip;

@@ -161,19 +225,2 @@ var wrapperStyles = _extends({

var tipStyles = _extends({}, currentPositions.tip, {
background: useDefaultStyles ? defaultBg : background,
color: useDefaultStyles ? defaultColor : color,
padding: padding,
boxSizing: 'border-box',
zIndex: 1000,
position: 'absolute',
display: 'inline-block'
});
var arrowStyles = _extends({}, currentPositions.arrow, {
position: 'absolute',
width: '0px',
height: '0px',
zIndex: 1001
});
var props = {

@@ -205,3 +252,3 @@ style: wrapperStyles,

// only use hover if they don't have a toggle event
} else if (useHover) {
} else if (useHover && !isControlledByProps) {
props.onMouseOver = this.startHover;

@@ -218,7 +265,31 @@ props.onMouseOut = tipContentHover ? this.endHover : this.hideTip;

return _react2.default.createElement(
this.props.tagName,
props,
children,
_react2.default.createElement(
// conditional rendering of tip
var tipPortal = void 0;
if (this.state.hasBeenShown) {
var currentPositions = (0, _position2.default)(direction, forceDirection, this.tip, this.target, _extends({}, this.state, { showTip: showTip }), {
background: useDefaultStyles ? defaultBg : background,
arrow: arrow,
arrowSize: arrowSize,
distance: distance
});
var tipStyles = _extends({}, currentPositions.tip, {
background: useDefaultStyles ? defaultBg : background,
color: useDefaultStyles ? defaultColor : color,
padding: padding,
boxSizing: 'border-box',
zIndex: 1000,
position: 'absolute',
display: 'inline-block'
});
var arrowStyles = _extends({}, currentPositions.arrow, {
position: 'absolute',
width: '0px',
height: '0px',
zIndex: 1001
});
tipPortal = _react2.default.createElement(
_reactMinimalistPortal2.default,

@@ -228,3 +299,3 @@ null,

'div',
_extends({}, portalProps, { className: className }),
_extends({}, portalProps, { className: typeof tipContentClassName !== 'undefined' ? tipContentClassName : className }),
_react2.default.createElement(

@@ -239,3 +310,10 @@ 'span',

)
)
);
}
return _react2.default.createElement(
TagName,
props,
children,
tipPortal
);

@@ -249,39 +327,43 @@ }

Tooltip.propTypes = {
// eslint-disable-next-line react/no-unused-prop-types
tagName: _propTypes2.default.string,
direction: _propTypes2.default.string,
arrow: _propTypes2.default.bool,
arrowSize: _propTypes2.default.number,
background: _propTypes2.default.string,
children: _propTypes2.default.node.isRequired,
className: _propTypes2.default.string,
color: _propTypes2.default.string,
content: _propTypes2.default.node.isRequired,
background: _propTypes2.default.string,
color: _propTypes2.default.string,
padding: _propTypes2.default.string,
styles: _propTypes2.default.object,
direction: _propTypes2.default.string,
distance: _propTypes2.default.number,
eventOff: _propTypes2.default.string,
eventOn: _propTypes2.default.string,
eventToggle: _propTypes2.default.string,
useHover: _propTypes2.default.bool,
useDefaultStyles: _propTypes2.default.bool,
forceDirection: _propTypes2.default.bool,
hoverDelay: _propTypes2.default.number,
isOpen: _propTypes2.default.bool,
hoverDelay: _propTypes2.default.number,
padding: _propTypes2.default.string,
styles: _propTypes2.default.object,
tagName: _propTypes2.default.string,
tipContentHover: _propTypes2.default.bool,
arrow: _propTypes2.default.bool,
arrowSize: _propTypes2.default.number,
distance: _propTypes2.default.number
tipContentClassName: _propTypes2.default.string,
useDefaultStyles: _propTypes2.default.bool,
useHover: _propTypes2.default.bool
};
Tooltip.defaultProps = {
tagName: 'div',
direction: 'up',
arrow: true,
arrowSize: 10,
background: '',
className: '',
background: '',
color: '',
direction: 'up',
distance: undefined,
forceDirection: false,
hoverDelay: 200,
padding: '10px',
styles: {},
useHover: true,
tagName: 'div',
tipContentHover: false,
tipContentClassName: undefined,
useDefaultStyles: false,
hoverDelay: 200,
tipContentHover: false,
arrow: true,
arrowSize: 10,
distance: undefined
useHover: true
};
exports.default = Tooltip;

25

dist/position.js

@@ -6,2 +6,3 @@ 'use strict';

});
exports.minArrowPadding = undefined;

@@ -23,4 +24,4 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**

var minArrowPadding = exports.minArrowPadding = 5;
var bodyPadding = 10;
var minArrowPadding = 5;
var noArrowDistance = 3;

@@ -70,5 +71,7 @@

var transform = state.showTip ? undefined : 'translateX(-10000000px)';
var arrowSpacing = getArrowSpacing(props);
if (tip && state.showTip) {
if (tip) {

@@ -116,3 +119,4 @@ // get wrapper left position

left: left,
top: top
top: top,
transform: transform
};

@@ -128,6 +132,8 @@ }

var transform = state.showTip ? undefined : 'translateX(-10000000px)';
var arrowSpacing = getArrowSpacing(props);
var arrowPadding = props.arrow ? minArrowPadding : 0;
if (tip && state.showTip) {
if (tip) {
var scrollTop = getScrollTop();

@@ -171,3 +177,4 @@ var scrollLeft = getScrollLeft();

left: left,
top: top
top: top,
transform: transform
};

@@ -267,3 +274,3 @@ }

*/
function positions(direction, tip, target, state, props) {
function positions(direction, forceDirection, tip, target, state, props) {
var alignMode = parseAlignMode(direction);

@@ -273,3 +280,3 @@ var trimmedDirection = direction.split('-')[0];

var realDirection = trimmedDirection;
if (tip && state.showTip) {
if (!forceDirection && tip) {
var testArrowStyles = props.arrow && getArrowStyles(target, tip, trimmedDirection, state, props);

@@ -281,5 +288,5 @@ realDirection = (0, _getDirection2.default)(trimmedDirection, tip, target, props, bodyPadding, testArrowStyles);

// force the tip to display the width we measured everything at when visible, when scrolled
// force the tip to display the width we measured everything at when visible
var width = void 0;
if (tip && state.showTip && getScrollLeft() > 0) {
if (tip) {
// adding the exact width on the first render forces a bogus line break, so add 1px the first time

@@ -286,0 +293,0 @@ var spacer = tip.style.width ? 0 : 1;

4

dist/react-tooltip-lite.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactToolTipLite=t(require("React"),require("ReactDOM")):e.ReactToolTipLite=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(10)},function(e,t){function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function o(e){if(f===setTimeout)return setTimeout(e,0);if((f===r||!f)&&setTimeout)return f=setTimeout,setTimeout(e,0);try{return f(e,0)}catch(t){try{return f.call(null,e,0)}catch(t){return f.call(this,e,0)}}}function i(e){if(l===clearTimeout)return clearTimeout(e);if((l===n||!l)&&clearTimeout)return l=clearTimeout,clearTimeout(e);try{return l(e)}catch(t){try{return l.call(null,e)}catch(t){return l.call(this,e)}}}function a(){v&&d&&(v=!1,d.length?h=d.concat(h):y=-1,h.length&&u())}function u(){if(!v){var e=o(a);v=!0;for(var t=h.length;t;){for(d=h,h=[];++y<t;)d&&d[y].run();y=-1,t=h.length}d=null,v=!1,i(e)}}function s(e,t){this.fun=e,this.array=t}function c(){}var f,l,p=e.exports={};!function(){try{f="function"==typeof setTimeout?setTimeout:r}catch(e){f=r}try{l="function"==typeof clearTimeout?clearTimeout:n}catch(e){l=n}}();var d,h=[],v=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];h.push(new s(e,t)),1!==h.length||v||o(u)},s.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.prependListener=c,p.prependOnceListener=c,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){"use strict";function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n},function(e,t,r){(function(t){"use strict";function r(e,t,r,o,i,a,u,s){if(n(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var f=[r,o,i,a,u,s],l=0;c=new Error(t.replace(/%s/g,function(){return f[l++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var n=function(e){};"production"!==t.env.NODE_ENV&&(n=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=r}).call(t,r(1))},function(e,t){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0}function i(){return window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0}function a(){return"undefined"!=typeof document?document.documentElement.clientWidth-2*y:1e3}function u(e){var t=e.split("-");return t.length>1?t[1]:"middle"}function s(e){var t=e.arrow?e.arrowSize:b;return"number"==typeof e.distance?e.distance:t}function c(e,t,r,n,u,c){var f=-1e7,l=void 0,p=s(c);if(e&&r.showTip){var d=i(),h=t.getBoundingClientRect(),v=h.left+d,g=Math.round(t.offsetWidth/2),b=Math.min(a(),e.offsetWidth),m=v+g,w=m-c.arrowSize,O=m+c.arrowSize;if("start"===u)f=c.arrow?Math.min(w,v):v;else if("end"===u){var T=Math.max(O,v+t.offsetWidth),x=c.arrow?T:v+t.offsetWidth;f=Math.max(x-b,y+d)}else{var S=v+g-Math.round(b/2),E=y+d;f=Math.max(S,E)}var j=f+b,k=d+document.documentElement.clientWidth-y,_=j-k;_>0&&(f-=_),l="up"===n?h.top+o()-(e.offsetHeight+p):h.bottom+o()+p}return{left:f,top:l}}function f(e,t,r,n,a,u){var c=-1e7,f=0,l=s(u),p=u.arrow?g:0;if(e&&r.showTip){var d=o(),h=i(),v=t.getBoundingClientRect(),b=v.top+d,m=Math.round(t.offsetHeight/2),w=b+m-u.arrowSize,O=v.top+d+m+u.arrowSize;if("start"===a)f=u.arrow?Math.min(b,w):b;else if("end"===a){var T=v.bottom+d-e.offsetHeight;f=u.arrow?Math.max(T,O-e.offsetHeight):T}else{var x=Math.max(b+m-Math.round(e.offsetHeight/2),y+d);f=Math.min(x,w-p)}var S=f-d+e.offsetHeight+y-window.innerHeight;S>0&&(f=Math.max(f-S,O+p-e.offsetHeight)),c="right"===n?v.right+l+h:v.left-l-e.offsetWidth+h}return{left:c,top:f}}function l(e,t,r,n,a){if(!e||!a.arrow)return{top:"0",left:"-10000000px"};var u=e.getBoundingClientRect(),c=Math.round(e.offsetHeight/2),f=Math.round(e.offsetWidth/2),l=o(),p=i(),h=s(a),v={};switch(r){case"right":return v.borderTop=a.arrowSize+"px solid transparent",v.borderBottom=a.arrowSize+"px solid transparent",a.background?v.borderRight=a.arrowSize+"px solid "+a.background:(v.borderRightWidth=a.arrowSize+"px",v.borderRightStyle="solid"),d({},v,{top:n.showTip&&t?u.top+l+c-a.arrowSize:"-10000000px",left:u.right+p+h-a.arrowSize});case"left":return v.borderTop=a.arrowSize+"px solid transparent",v.borderBottom=a.arrowSize+"px solid transparent",a.background?v.borderLeft=a.arrowSize+"px solid "+a.background:(v.borderLeftWidth=a.arrowSize+"px",v.borderLeftStyle="solid"),d({},v,{top:n.showTip&&t?u.top+l+c-a.arrowSize:"-10000000px",left:u.left+p-h-1});case"up":return v.borderLeft=a.arrowSize+"px solid transparent",v.borderRight=a.arrowSize+"px solid transparent",a.background?v.borderTop=a.arrowSize+"px solid "+a.background:(v.borderTopWidth=a.arrowSize+"px",v.borderTopStyle="solid"),d({},v,{left:n.showTip&&t?u.left+p+f-a.arrowSize:"-10000000px",top:u.top+l-h});case"down":default:return v.borderLeft=a.arrowSize+"px solid transparent",v.borderRight=a.arrowSize+"px solid transparent",a.background?v.borderBottom="10px solid "+a.background:(v.borderBottomWidth=a.arrowSize+"px",v.borderBottomStyle="solid"),d({},v,{left:n.showTip&&t?u.left+p+f-a.arrowSize:"-10000000px",top:u.bottom+l+h-a.arrowSize})}}function p(e,t,r,n,o){var s=u(e),p=e.split("-")[0],h=p;if(t&&n.showTip){var g=o.arrow&&l(r,t,p,n,o);h=(0,v.default)(p,t,r,o,y,g)}var b=a(),m=void 0;if(t&&n.showTip&&i()>0){var w=t.style.width?0:1;m=Math.min(t.offsetWidth,b)+w}var O="up"===h||"down"===h?c(t,r,n,h,s,o):f(t,r,n,h,s,o);return{tip:d({},O,{maxWidth:b,width:m}),arrow:l(r,t,h,n,o),realDirection:h}}Object.defineProperty(t,"__esModule",{value:!0});var d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.getScrollLeft=i,t.getArrowSpacing=s,t.default=p;var h=r(9),v=n(h),y=10,g=5,b=3},function(e,t,r){(function(t){"use strict";var n=r(2),o=n;if("production"!==t.env.NODE_ENV){var i=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];var o=0,i="Warning: "+e.replace(/%s/g,function(){return r[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(e,t){if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){for(var r=arguments.length,n=Array(r>2?r-2:0),o=2;o<r;o++)n[o-2]=arguments[o];i.apply(void 0,[t].concat(n))}}}e.exports=o}).call(t,r(1))},function(e,t,r){(function(t){if("production"!==t.env.NODE_ENV){var n="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},i=!0;e.exports=r(14)(o,i)}else e.exports=r(13)()}).call(t,r(1))},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e,t,r,n){var o=t.getBoundingClientRect(),i=Math.min(o.left,document.documentElement.clientWidth-o.right);return e.offsetWidth+t.offsetWidth+r+n+i<document.documentElement.clientWidth}function o(e){var t=e.getBoundingClientRect().bottom>window.innerHeight,r=e.getBoundingClientRect().top<0;return!t&&!r}function i(e,t,r){var n=(0,u.getScrollLeft)(),o=t.left-n>r,i=t.left+2*e.arrowSize<n+document.documentElement.clientWidth-r;return!o||!i}function a(e,t,r,s,c,f,l){if(!r)return e;var p=r.getBoundingClientRect(),d=(0,u.getArrowSpacing)(s),h=t.offsetHeight+d+c,v=window.innerHeight-p.bottom,y=p.top,g=v>=h,b=y>=h;switch(e){case"right":return n(t,r,d,c)&&o(r)?document.documentElement.clientWidth-p.right<t.offsetWidth+d+c?"left":"right":a("up",t,r,d,c,f,!0);case"left":return n(t,r,d,c)&&o(r)?p.left<t.offsetWidth+d+c?"right":"left":a("up",t,r,d,c,f,!0);case"up":if(!l&&f&&i(s,f,c))return a("left",t,r,d,c,f,!0);if(!b){if(g)return"down";if(n(t,r,d,c))return a("right",t,r,d,c,f,!0)}return"up";case"down":default:if(!l&&f&&i(s,f,c))return a("right",t,r,d,c,f,!0);if(!g){if(b)return"up";if(n(t,r,d,c))return a("right",t,r,d,c,f,!0)}return"down"}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=a;var u=r(5)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),c=r(8),f=n(c),l=r(7),p=n(l),d=r(15),h=n(d),v=r(5),y=n(v),g="#fff",b="#333",m=function(e){return e.stopPropagation()},w=function(e){function t(){o(this,t);var e=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.state={showTip:!1,hasHover:!1,ignoreShow:!1},e.showTip=e.showTip.bind(e),e.hideTip=e.hideTip.bind(e),e.checkHover=e.checkHover.bind(e),e.toggleTip=e.toggleTip.bind(e),e.startHover=e.startHover.bind(e),e.endHover=e.endHover.bind(e),e}return a(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&this.setState({isOpen:!0})}},{key:"toggleTip",value:function(){this.setState({showTip:!this.state.showTip})}},{key:"showTip",value:function(){this.setState({showTip:!0})}},{key:"hideTip",value:function(){this.setState({hasHover:!1}),this.setState({showTip:!1})}},{key:"startHover",value:function(){this.state.ignoreShow||(this.setState({hasHover:!0}),setTimeout(this.checkHover,this.props.hoverDelay))}},{key:"endHover",value:function(){this.setState({hasHover:!1}),setTimeout(this.checkHover,this.props.hoverDelay)}},{key:"checkHover",value:function(){this.setState({showTip:this.state.hasHover})}},{key:"render",value:function(){var e=this,t=this.props,r=t.direction,n=t.className,o=t.padding,i=t.children,a=t.content,s=t.styles,c=t.eventOn,l=t.eventOff,p=t.eventToggle,d=t.useHover,v=t.background,w=t.color,O=t.useDefaultStyles,T=t.isOpen,x=t.tipContentHover,S=t.arrow,E=t.arrowSize,j=t.distance,k="undefined"==typeof T?this.state.showTip:T,_=(0,y.default)(r,this.tip,this.target,u({},this.state,{showTip:k}),{background:O?b:v,arrow:S,arrowSize:E,distance:j}),R=u({position:"relative"},s),P=u({},_.tip,{background:O?b:v,color:O?g:w,padding:o,boxSizing:"border-box",zIndex:1e3,position:"absolute",display:"inline-block"}),N=u({},_.arrow,{position:"absolute",width:"0px",height:"0px",zIndex:1001}),H={style:R,ref:function(t){e.target=t},className:n},M={onClick:m};return l&&(H[l]=this.hideTip),c&&(H[c]=this.showTip),p?H[p]=this.toggleTip:d&&(H.onMouseOver=this.startHover,H.onMouseOut=x?this.endHover:this.hideTip,H.onTouchStart=this.toggleTip,x&&(M.onMouseOver=this.startHover,M.onMouseOut=this.endHover,M.onTouchStart=m)),f.default.createElement(this.props.tagName,H,i,f.default.createElement(h.default,null,f.default.createElement("div",u({},M,{className:n}),f.default.createElement("span",{className:"react-tooltip-lite",style:P,ref:function(t){e.tip=t}},a),f.default.createElement("span",{className:"react-tooltip-lite-arrow react-tooltip-lite-"+_.realDirection+"-arrow",style:N}))))}}]),t}(f.default.Component);w.propTypes={tagName:p.default.string,direction:p.default.string,className:p.default.string,content:p.default.node.isRequired,background:p.default.string,color:p.default.string,padding:p.default.string,styles:p.default.object,eventOff:p.default.string,eventOn:p.default.string,eventToggle:p.default.string,useHover:p.default.bool,useDefaultStyles:p.default.bool,isOpen:p.default.bool,hoverDelay:p.default.number,tipContentHover:p.default.bool,arrow:p.default.bool,arrowSize:p.default.number,distance:p.default.number},w.defaultProps={tagName:"div",direction:"up",className:"",background:"",color:"",padding:"10px",styles:{},useHover:!0,useDefaultStyles:!1,hoverDelay:200,tipContentHover:!1,arrow:!0,arrowSize:10,distance:void 0},t.default=w},function(e,t){/*
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReactToolTipLite=t(require("React"),require("ReactDOM")):e.ReactToolTipLite=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={exports:{},id:n,loaded:!1};return e[n].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(10)},function(e,t){function r(){throw new Error("setTimeout has not been defined")}function n(){throw new Error("clearTimeout has not been defined")}function o(e){if(l===setTimeout)return setTimeout(e,0);if((l===r||!l)&&setTimeout)return l=setTimeout,setTimeout(e,0);try{return l(e,0)}catch(t){try{return l.call(null,e,0)}catch(t){return l.call(this,e,0)}}}function i(e){if(f===clearTimeout)return clearTimeout(e);if((f===n||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function a(){v&&d&&(v=!1,d.length?h=d.concat(h):y=-1,h.length&&u())}function u(){if(!v){var e=o(a);v=!0;for(var t=h.length;t;){for(d=h,h=[];++y<t;)d&&d[y].run();y=-1,t=h.length}d=null,v=!1,i(e)}}function s(e,t){this.fun=e,this.array=t}function c(){}var l,f,p=e.exports={};!function(){try{l="function"==typeof setTimeout?setTimeout:r}catch(e){l=r}try{f="function"==typeof clearTimeout?clearTimeout:n}catch(e){f=n}}();var d,h=[],v=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var r=1;r<arguments.length;r++)t[r-1]=arguments[r];h.push(new s(e,t)),1!==h.length||v||o(u)},s.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=c,p.addListener=c,p.once=c,p.off=c,p.removeListener=c,p.removeAllListeners=c,p.emit=c,p.prependListener=c,p.prependOnceListener=c,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){"use strict";function r(e){return function(){return e}}var n=function(){};n.thatReturns=r,n.thatReturnsFalse=r(!1),n.thatReturnsTrue=r(!0),n.thatReturnsNull=r(null),n.thatReturnsThis=function(){return this},n.thatReturnsArgument=function(e){return e},e.exports=n},function(e,t,r){(function(t){"use strict";function r(e,t,r,o,i,a,u,s){if(n(t),!e){var c;if(void 0===t)c=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var l=[r,o,i,a,u,s],f=0;c=new Error(t.replace(/%s/g,function(){return l[f++]})),c.name="Invariant Violation"}throw c.framesToPop=1,c}}var n=function(e){};"production"!==t.env.NODE_ENV&&(n=function(e){if(void 0===e)throw new Error("invariant requires an error message argument")}),e.exports=r}).call(t,r(1))},function(e,t){"use strict";var r="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED";e.exports=r},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(){return window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0}function i(){return window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0}function a(){return"undefined"!=typeof document?document.documentElement.clientWidth-2*m:1e3}function u(e){var t=e.split("-");return t.length>1?t[1]:"middle"}function s(e){var t=e.arrow?e.arrowSize:b;return"number"==typeof e.distance?e.distance:t}function c(e,t,r,n,u,c){var l=-1e7,f=void 0,p=r.showTip?void 0:"translateX(-10000000px)",d=s(c);if(e){var h=i(),v=t.getBoundingClientRect(),y=v.left+h,b=Math.round(t.offsetWidth/2),g=Math.min(a(),e.offsetWidth),w=y+b,T=w-c.arrowSize,O=w+c.arrowSize;if("start"===u)l=c.arrow?Math.min(T,y):y;else if("end"===u){var S=Math.max(O,y+t.offsetWidth),x=c.arrow?S:y+t.offsetWidth;l=Math.max(x-g,m+h)}else{var E=y+b-Math.round(g/2),k=m+h;l=Math.max(E,k)}var j=l+g,R=h+document.documentElement.clientWidth-m,_=j-R;_>0&&(l-=_),f="up"===n?v.top+o()-(e.offsetHeight+d):v.bottom+o()+d}return{left:l,top:f,transform:p}}function l(e,t,r,n,a,u){var c=-1e7,l=0,f=r.showTip?void 0:"translateX(-10000000px)",p=s(u),d=u.arrow?y:0;if(e){var h=o(),v=i(),b=t.getBoundingClientRect(),g=b.top+h,w=Math.round(t.offsetHeight/2),T=g+w-u.arrowSize,O=b.top+h+w+u.arrowSize;if("start"===a)l=u.arrow?Math.min(g,T):g;else if("end"===a){var S=b.bottom+h-e.offsetHeight;l=u.arrow?Math.max(S,O-e.offsetHeight):S}else{var x=Math.max(g+w-Math.round(e.offsetHeight/2),m+h);l=Math.min(x,T-d)}var E=l-h+e.offsetHeight+m-window.innerHeight;E>0&&(l=Math.max(l-E,O+d-e.offsetHeight)),c="right"===n?b.right+p+v:b.left-p-e.offsetWidth+v}return{left:c,top:l,transform:f}}function f(e,t,r,n,a){if(!e||!a.arrow)return{top:"0",left:"-10000000px"};var u=e.getBoundingClientRect(),c=Math.round(e.offsetHeight/2),l=Math.round(e.offsetWidth/2),f=o(),p=i(),h=s(a),v={};switch(r){case"right":return v.borderTop=a.arrowSize+"px solid transparent",v.borderBottom=a.arrowSize+"px solid transparent",a.background?v.borderRight=a.arrowSize+"px solid "+a.background:(v.borderRightWidth=a.arrowSize+"px",v.borderRightStyle="solid"),d({},v,{top:n.showTip&&t?u.top+f+c-a.arrowSize:"-10000000px",left:u.right+p+h-a.arrowSize});case"left":return v.borderTop=a.arrowSize+"px solid transparent",v.borderBottom=a.arrowSize+"px solid transparent",a.background?v.borderLeft=a.arrowSize+"px solid "+a.background:(v.borderLeftWidth=a.arrowSize+"px",v.borderLeftStyle="solid"),d({},v,{top:n.showTip&&t?u.top+f+c-a.arrowSize:"-10000000px",left:u.left+p-h-1});case"up":return v.borderLeft=a.arrowSize+"px solid transparent",v.borderRight=a.arrowSize+"px solid transparent",a.background?v.borderTop=a.arrowSize+"px solid "+a.background:(v.borderTopWidth=a.arrowSize+"px",v.borderTopStyle="solid"),d({},v,{left:n.showTip&&t?u.left+p+l-a.arrowSize:"-10000000px",top:u.top+f-h});case"down":default:return v.borderLeft=a.arrowSize+"px solid transparent",v.borderRight=a.arrowSize+"px solid transparent",a.background?v.borderBottom="10px solid "+a.background:(v.borderBottomWidth=a.arrowSize+"px",v.borderBottomStyle="solid"),d({},v,{left:n.showTip&&t?u.left+p+l-a.arrowSize:"-10000000px",top:u.bottom+f+h-a.arrowSize})}}function p(e,t,r,n,o,i){var s=u(e),p=e.split("-")[0],h=p;if(!t&&r){var y=i.arrow&&f(n,r,p,o,i);h=(0,v.default)(p,r,n,i,m,y)}var b=a(),g=void 0;if(r){var w=r.style.width?0:1;g=Math.min(r.offsetWidth,b)+w}var T="up"===h||"down"===h?c(r,n,o,h,s,i):l(r,n,o,h,s,i);return{tip:d({},T,{maxWidth:b,width:g}),arrow:f(n,r,h,o,i),realDirection:h}}Object.defineProperty(t,"__esModule",{value:!0}),t.minArrowPadding=void 0;var d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e};t.getScrollLeft=i,t.getArrowSpacing=s,t.default=p;var h=r(9),v=n(h),y=t.minArrowPadding=5,m=10,b=3},function(e,t,r){(function(t){"use strict";var n=r(2),o=n;if("production"!==t.env.NODE_ENV){var i=function(e){for(var t=arguments.length,r=Array(t>1?t-1:0),n=1;n<t;n++)r[n-1]=arguments[n];var o=0,i="Warning: "+e.replace(/%s/g,function(){return r[o++]});"undefined"!=typeof console&&console.error(i);try{throw new Error(i)}catch(e){}};o=function(e,t){if(void 0===t)throw new Error("`warning(condition, format, ...args)` requires a warning message argument");if(0!==t.indexOf("Failed Composite propType: ")&&!e){for(var r=arguments.length,n=Array(r>2?r-2:0),o=2;o<r;o++)n[o-2]=arguments[o];i.apply(void 0,[t].concat(n))}}}e.exports=o}).call(t,r(1))},function(e,t,r){(function(t){if("production"!==t.env.NODE_ENV){var n="function"==typeof Symbol&&Symbol.for&&Symbol.for("react.element")||60103,o=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===n},i=!0;e.exports=r(14)(o,i)}else e.exports=r(13)()}).call(t,r(1))},function(t,r){t.exports=e},function(e,t,r){"use strict";function n(e,t,r,n){var o=t.getBoundingClientRect(),i=Math.min(o.left,document.documentElement.clientWidth-o.right);return e.offsetWidth+t.offsetWidth+r+n+i<document.documentElement.clientWidth}function o(e,t,r){var n=e.getBoundingClientRect(),o=n.bottom>window.innerHeight,i=n.top<0;if(i&&o)return!0;if(e.offsetHeight>t.offsetHeight){var a=e.offsetHeight/2,s=r.arrowSize+u.minArrowPadding,c=n.bottom-window.innerHeight,l=-n.top,f=a-c,p=a-l;return f>=s&&p>=s}return!o&&!i}function i(e,t,r){var n=(0,u.getScrollLeft)(),o=t.left-n>r,i=t.left+2*e.arrowSize<n+document.documentElement.clientWidth-r;return!o||!i}function a(e,t,r,s,c,l,f){if(!r)return e;var p=r.getBoundingClientRect(),d=(0,u.getArrowSpacing)(s),h=t.offsetHeight+d+c,v=window.innerHeight-p.bottom,y=p.top,m=v>=h,b=y>=h;switch(e){case"right":return n(t,r,d,c)&&o(r,t,s)?document.documentElement.clientWidth-p.right<t.offsetWidth+d+c?"left":"right":a("up",t,r,d,c,l,!0);case"left":return n(t,r,d,c)&&o(r,t,s)?p.left<t.offsetWidth+d+c?"right":"left":a("up",t,r,d,c,l,!0);case"up":if(!f&&l&&i(s,l,c))return a("left",t,r,d,c,l,!0);if(!b){if(m)return"down";if(!f&&n(t,r,d,c))return a("right",t,r,d,c,l,!0)}return"up";case"down":default:if(!f&&l&&i(s,l,c))return a("right",t,r,d,c,l,!0);if(!m){if(b)return"up";if(!f&&n(t,r,d,c))return a("right",t,r,d,c,l,!0)}return"down"}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=a;var u=r(5)},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),c=r(8),l=n(c),f=r(7),p=n(f),d=r(15),h=n(d),v=r(5),y=n(v),m="#fff",b="#333",g=100,w=5,T=function(e){return e.stopPropagation()},O=function(e){function t(){o(this,t);var e=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this));return e.debounceTimeout=!1,e.hoverTimeout=!1,e.state={showTip:!1,hasHover:!1,ignoreShow:!1,hasBeenShown:!1},e.showTip=e.showTip.bind(e),e.hideTip=e.hideTip.bind(e),e.checkHover=e.checkHover.bind(e),e.toggleTip=e.toggleTip.bind(e),e.startHover=e.startHover.bind(e),e.endHover=e.endHover.bind(e),e.listenResizeScroll=e.listenResizeScroll.bind(e),e.handleResizeScroll=e.handleResizeScroll.bind(e),e}return a(t,e),s(t,null,[{key:"getDerivedStateFromProps",value:function(e){return e.isOpen?{hasBeenShown:!0}:null}}]),s(t,[{key:"componentDidMount",value:function(){this.props.isOpen&&this.setState({isOpen:!0}),window.addEventListener("resize",this.listenResizeScroll),window.addEventListener("scroll",this.listenResizeScroll)}},{key:"componentDidUpdate",value:function(e,t){return!this.state.hasBeenShown&&this.props.isOpen?(this.setState({hasBeenShown:!0}),setTimeout(this.showTip,0)):void(!t.hasBeenShown&&this.state.hasBeenShown&&this.showTip())}},{key:"componentWillUnmount",value:function(){window.removeEventListener("resize",this.listenResizeScroll),window.removeEventListener("scroll",this.listenResizeScroll),clearTimeout(this.debounceTimeout)}},{key:"listenResizeScroll",value:function(){clearTimeout(this.debounceTimeout),this.debounceTimeout=setTimeout(this.handleResizeScroll,g)}},{key:"handleResizeScroll",value:function(){if(this.state.showTip){var e=Math.round(document.documentElement.clientWidth/w)*w;this.setState({clientWidth:e})}}},{key:"toggleTip",value:function(){this.state.showTip?this.hideTip():this.showTip()}},{key:"showTip",value:function(){return this.state.hasBeenShown?void this.setState({showTip:!0}):this.setState({hasBeenShown:!0})}},{key:"hideTip",value:function(){this.setState({hasHover:!1}),this.setState({showTip:!1})}},{key:"startHover",value:function(){this.state.ignoreShow||(this.setState({hasHover:!0}),clearTimeout(this.hoverTimeout),this.hoverTimeout=setTimeout(this.checkHover,this.props.hoverDelay))}},{key:"endHover",value:function(){this.setState({hasHover:!1}),clearTimeout(this.hoverTimeout),this.hoverTimeout=setTimeout(this.checkHover,this.props.hoverDelay)}},{key:"checkHover",value:function(){this.state.hasHover?this.showTip():this.hideTip()}},{key:"render",value:function(){var e=this,t=this.props,r=t.arrow,n=t.arrowSize,o=t.background,i=t.className,a=t.children,s=t.color,c=t.content,f=t.direction,p=t.distance,d=t.eventOff,v=t.eventOn,g=t.eventToggle,w=t.forceDirection,O=t.isOpen,S=t.padding,x=t.styles,E=t.tagName,k=t.tipContentHover,j=t.tipContentClassName,R=t.useDefaultStyles,_=t.useHover,z=!("undefined"==typeof O),P=z?O:this.state.showTip,N=u({position:"relative"},x),H={style:N,ref:function(t){e.target=t},className:i},M={onClick:T};d&&(H[d]=this.hideTip),v&&(H[v]=this.showTip),g?H[g]=this.toggleTip:_&&!z&&(H.onMouseOver=this.startHover,H.onMouseOut=k?this.endHover:this.hideTip,H.onTouchStart=this.toggleTip,k&&(M.onMouseOver=this.startHover,M.onMouseOut=this.endHover,M.onTouchStart=T));var D=void 0;if(this.state.hasBeenShown){var C=(0,y.default)(f,w,this.tip,this.target,u({},this.state,{showTip:P}),{background:R?b:o,arrow:r,arrowSize:n,distance:p}),W=u({},C.tip,{background:R?b:o,color:R?m:s,padding:S,boxSizing:"border-box",zIndex:1e3,position:"absolute",display:"inline-block"}),L=u({},C.arrow,{position:"absolute",width:"0px",height:"0px",zIndex:1001});D=l.default.createElement(h.default,null,l.default.createElement("div",u({},M,{className:"undefined"!=typeof j?j:i}),l.default.createElement("span",{className:"react-tooltip-lite",style:W,ref:function(t){e.tip=t}},c),l.default.createElement("span",{className:"react-tooltip-lite-arrow react-tooltip-lite-"+C.realDirection+"-arrow",style:L})))}return l.default.createElement(E,H,a,D)}}]),t}(l.default.Component);O.propTypes={arrow:p.default.bool,arrowSize:p.default.number,background:p.default.string,children:p.default.node.isRequired,className:p.default.string,color:p.default.string,content:p.default.node.isRequired,direction:p.default.string,distance:p.default.number,eventOff:p.default.string,eventOn:p.default.string,eventToggle:p.default.string,forceDirection:p.default.bool,hoverDelay:p.default.number,isOpen:p.default.bool,padding:p.default.string,styles:p.default.object,tagName:p.default.string,tipContentHover:p.default.bool,tipContentClassName:p.default.string,useDefaultStyles:p.default.bool,useHover:p.default.bool},O.defaultProps={arrow:!0,arrowSize:10,background:"",className:"",color:"",direction:"up",distance:void 0,forceDirection:!1,hoverDelay:200,padding:"10px",styles:{},tagName:"div",tipContentHover:!1,tipContentClassName:void 0,useDefaultStyles:!1,useHover:!0},t.default=O},function(e,t){/*
object-assign

@@ -6,2 +6,2 @@ (c) Sindre Sorhus

*/
"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function n(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;var n=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==n.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=n()?Object.assign:function(e,t){for(var n,u,s=r(e),c=1;c<arguments.length;c++){n=Object(arguments[c]);for(var f in n)i.call(n,f)&&(s[f]=n[f]);if(o){u=o(n);for(var l=0;l<u.length;l++)a.call(n,u[l])&&(s[u[l]]=n[u[l]])}}return s}},function(e,t,r){(function(t){"use strict";function n(e,r,n,s,c){if("production"!==t.env.NODE_ENV)for(var f in e)if(e.hasOwnProperty(f)){var l;try{o("function"==typeof e[f],"%s: %s type `%s` is invalid; it must be a function, usually from the `prop-types` package, but received `%s`.",s||"React class",n,f,typeof e[f]),l=e[f](r,f,s,n,null,a)}catch(e){l=e}if(i(!l||l instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",s||"React class",n,f,typeof l),l instanceof Error&&!(l.message in u)){u[l.message]=!0;var p=c?c():"";i(!1,"Failed %s type: %s%s",n,l.message,null!=p?p:"")}}}if("production"!==t.env.NODE_ENV)var o=r(3),i=r(6),a=r(4),u={};e.exports=n}).call(t,r(1))},function(e,t,r){"use strict";var n=r(2),o=r(3),i=r(4);e.exports=function(){function e(e,t,r,n,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){(function(t){"use strict";var n=r(2),o=r(3),i=r(6),a=r(11),u=r(4),s=r(12);e.exports=function(e,r){function c(e){var t=e&&(P&&e[P]||e[N]);if("function"==typeof t)return t}function f(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function l(e){this.message=e,this.stack=""}function p(e){function n(n,c,f,p,d,h,v){if(p=p||H,h=h||f,v!==u)if(r)o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var y=p+":"+f;!a[y]&&s<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",h,p),a[y]=!0,s++)}return null==c[f]?n?new l(null===c[f]?"The "+d+" `"+h+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+h+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(c,f,p,d,h)}if("production"!==t.env.NODE_ENV)var a={},s=0;var c=n.bind(null,!1);return c.isRequired=n.bind(null,!0),c}function d(e){function t(t,r,n,o,i,a){var u=t[r],s=j(u);if(s!==e){var c=k(u);return new l("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+n+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function h(){return p(n.thatReturnsNull)}function v(e){function t(t,r,n,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var a=t[r];if(!Array.isArray(a)){var s=j(a);return new l("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+n+"`, expected an array."))}for(var c=0;c<a.length;c++){var f=e(a,c,n,o,i+"["+c+"]",u);if(f instanceof Error)return f}return null}return p(t)}function y(){function t(t,r,n,o,i){var a=t[r];if(!e(a)){var u=j(a);return new l("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+n+"`, expected a single ReactElement."))}return null}return p(t)}function g(e){function t(t,r,n,o,i){if(!(t[r]instanceof e)){var a=e.name||H,u=R(t[r]);return new l("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+n+"`, expected ")+("instance of `"+a+"`."))}return null}return p(t)}function b(e){function r(t,r,n,o,i){for(var a=t[r],u=0;u<e.length;u++)if(f(a,e[u]))return null;var s=JSON.stringify(e);return new l("Invalid "+o+" `"+i+"` of value `"+a+"` "+("supplied to `"+n+"`, expected one of "+s+"."))}return Array.isArray(e)?p(r):("production"!==t.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,n.thatReturnsNull)}function m(e){function t(t,r,n,o,i){if("function"!=typeof e)return new l("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var a=t[r],s=j(a);if("object"!==s)return new l("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+n+"`, expected an object."));for(var c in a)if(a.hasOwnProperty(c)){var f=e(a,c,n,o,i+"."+c,u);if(f instanceof Error)return f}return null}return p(t)}function w(e){function r(t,r,n,o,i){for(var a=0;a<e.length;a++){var s=e[a];if(null==s(t,r,n,o,i,u))return null}return new l("Invalid "+o+" `"+i+"` supplied to "+("`"+n+"`."))}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,n.thatReturnsNull;for(var o=0;o<e.length;o++){var a=e[o];if("function"!=typeof a)return i(!1,"Invalid argument supplied to oneOfType. Expected an array of check functions, but received %s at index %s.",_(a),o),n.thatReturnsNull}return p(r)}function O(){function e(e,t,r,n,o){return S(e[t])?null:new l("Invalid "+n+" `"+o+"` supplied to "+("`"+r+"`, expected a ReactNode."))}return p(e)}function T(e){function t(t,r,n,o,i){var a=t[r],s=j(a);if("object"!==s)return new l("Invalid "+o+" `"+i+"` of type `"+s+"` "+("supplied to `"+n+"`, expected `object`."));for(var c in e){var f=e[c];if(f){var p=f(a,c,n,o,i+"."+c,u);if(p)return p}}return null}return p(t)}function x(e){function t(t,r,n,o,i){var s=t[r],c=j(s);if("object"!==c)return new l("Invalid "+o+" `"+i+"` of type `"+c+"` "+("supplied to `"+n+"`, expected `object`."));var f=a({},t[r],e);for(var p in f){var d=e[p];if(!d)return new l("Invalid "+o+" `"+i+"` key `"+p+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(t[r],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var h=d(s,p,n,o,i+"."+p,u);if(h)return h}return null}return p(t)}function S(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(S);if(null===t||e(t))return!0;var r=c(t);if(!r)return!1;var n,o=r.call(t);if(r!==t.entries){for(;!(n=o.next()).done;)if(!S(n.value))return!1}else for(;!(n=o.next()).done;){var i=n.value;if(i&&!S(i[1]))return!1}return!0;default:return!1}}function E(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function j(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":E(t,e)?"symbol":t}function k(e){if("undefined"==typeof e||null===e)return""+e;var t=j(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function _(e){var t=k(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function R(e){return e.constructor&&e.constructor.name?e.constructor.name:H}var P="function"==typeof Symbol&&Symbol.iterator,N="@@iterator",H="<<anonymous>>",M={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:h(),arrayOf:v,element:y(),instanceOf:g,node:O(),objectOf:m,oneOf:b,oneOfType:w,shape:T,exact:x};return l.prototype=Error.prototype,M.checkPropTypes=s,M.PropTypes=M,M}}).call(t,r(1))},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=r(8),c=r(7),f=n(c),l=r(16),p=n(l),d="function"==typeof p.default.createPortal,h=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),u(t,[{key:"componentWillMount",value:function(){this.popup=document.createElement("div"),document.body.appendChild(this.popup),this.renderLayer()}},{key:"componentDidUpdate",value:function(){this.renderLayer()}},{key:"componentWillUnmount",value:function(){d||p.default.unmountComponentAtNode(this.popup),document.body.removeChild(this.popup)}},{key:"renderLayer",value:function(){d||p.default.unstable_renderSubtreeIntoContainer(this,this.props.children,this.popup)}},{key:"render",value:function(){return d?p.default.createPortal(this.props.children,this.popup):null}}]),t}(s.Component);h.propTypes={children:f.default.node},t.default=h},function(e,r){e.exports=t}])});
"use strict";function r(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}function n(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},r=0;r<10;r++)t["_"+String.fromCharCode(r)]=r;var n=Object.getOwnPropertyNames(t).map(function(e){return t[e]});if("0123456789"!==n.join(""))return!1;var o={};return"abcdefghijklmnopqrst".split("").forEach(function(e){o[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},o)).join("")}catch(e){return!1}}var o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,a=Object.prototype.propertyIsEnumerable;e.exports=n()?Object.assign:function(e,t){for(var n,u,s=r(e),c=1;c<arguments.length;c++){n=Object(arguments[c]);for(var l in n)i.call(n,l)&&(s[l]=n[l]);if(o){u=o(n);for(var f=0;f<u.length;f++)a.call(n,u[f])&&(s[u[f]]=n[u[f]])}}return s}},function(e,t,r){(function(t){"use strict";function n(e,r,n,s,c){if("production"!==t.env.NODE_ENV)for(var l in e)if(e.hasOwnProperty(l)){var f;try{o("function"==typeof e[l],"%s: %s type `%s` is invalid; it must be a function, usually from the `prop-types` package, but received `%s`.",s||"React class",n,l,typeof e[l]),f=e[l](r,l,s,n,null,a)}catch(e){f=e}if(i(!f||f instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",s||"React class",n,l,typeof f),f instanceof Error&&!(f.message in u)){u[f.message]=!0;var p=c?c():"";i(!1,"Failed %s type: %s%s",n,f.message,null!=p?p:"")}}}if("production"!==t.env.NODE_ENV)var o=r(3),i=r(6),a=r(4),u={};e.exports=n}).call(t,r(1))},function(e,t,r){"use strict";var n=r(2),o=r(3),i=r(4);e.exports=function(){function e(e,t,r,n,a,u){u!==i&&o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types")}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t};return r.checkPropTypes=n,r.PropTypes=r,r}},function(e,t,r){(function(t){"use strict";var n=r(2),o=r(3),i=r(6),a=r(11),u=r(4),s=r(12);e.exports=function(e,r){function c(e){var t=e&&(z&&e[z]||e[P]);if("function"==typeof t)return t}function l(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function f(e){this.message=e,this.stack=""}function p(e){function n(n,c,l,p,d,h,v){if(p=p||N,h=h||l,v!==u)if(r)o(!1,"Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");else if("production"!==t.env.NODE_ENV&&"undefined"!=typeof console){var y=p+":"+l;!a[y]&&s<3&&(i(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will throw in the standalone `prop-types` package. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",h,p),a[y]=!0,s++)}return null==c[l]?n?new f(null===c[l]?"The "+d+" `"+h+"` is marked as required "+("in `"+p+"`, but its value is `null`."):"The "+d+" `"+h+"` is marked as required in "+("`"+p+"`, but its value is `undefined`.")):null:e(c,l,p,d,h)}if("production"!==t.env.NODE_ENV)var a={},s=0;var c=n.bind(null,!1);return c.isRequired=n.bind(null,!0),c}function d(e){function t(t,r,n,o,i,a){var u=t[r],s=k(u);if(s!==e){var c=j(u);return new f("Invalid "+o+" `"+i+"` of type "+("`"+c+"` supplied to `"+n+"`, expected ")+("`"+e+"`."))}return null}return p(t)}function h(){return p(n.thatReturnsNull)}function v(e){function t(t,r,n,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var a=t[r];if(!Array.isArray(a)){var s=k(a);return new f("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+n+"`, expected an array."))}for(var c=0;c<a.length;c++){var l=e(a,c,n,o,i+"["+c+"]",u);if(l instanceof Error)return l}return null}return p(t)}function y(){function t(t,r,n,o,i){var a=t[r];if(!e(a)){var u=k(a);return new f("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+n+"`, expected a single ReactElement."))}return null}return p(t)}function m(e){function t(t,r,n,o,i){if(!(t[r]instanceof e)){var a=e.name||N,u=_(t[r]);return new f("Invalid "+o+" `"+i+"` of type "+("`"+u+"` supplied to `"+n+"`, expected ")+("instance of `"+a+"`."))}return null}return p(t)}function b(e){function r(t,r,n,o,i){for(var a=t[r],u=0;u<e.length;u++)if(l(a,e[u]))return null;var s=JSON.stringify(e);return new f("Invalid "+o+" `"+i+"` of value `"+a+"` "+("supplied to `"+n+"`, expected one of "+s+"."))}return Array.isArray(e)?p(r):("production"!==t.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOf, expected an instance of array."):void 0,n.thatReturnsNull)}function g(e){function t(t,r,n,o,i){if("function"!=typeof e)return new f("Property `"+i+"` of component `"+n+"` has invalid PropType notation inside objectOf.");var a=t[r],s=k(a);if("object"!==s)return new f("Invalid "+o+" `"+i+"` of type "+("`"+s+"` supplied to `"+n+"`, expected an object."));for(var c in a)if(a.hasOwnProperty(c)){var l=e(a,c,n,o,i+"."+c,u);if(l instanceof Error)return l}return null}return p(t)}function w(e){function r(t,r,n,o,i){for(var a=0;a<e.length;a++){var s=e[a];if(null==s(t,r,n,o,i,u))return null}return new f("Invalid "+o+" `"+i+"` supplied to "+("`"+n+"`."))}if(!Array.isArray(e))return"production"!==t.env.NODE_ENV?i(!1,"Invalid argument supplied to oneOfType, expected an instance of array."):void 0,n.thatReturnsNull;for(var o=0;o<e.length;o++){var a=e[o];if("function"!=typeof a)return i(!1,"Invalid argument supplied to oneOfType. Expected an array of check functions, but received %s at index %s.",R(a),o),n.thatReturnsNull}return p(r)}function T(){function e(e,t,r,n,o){return x(e[t])?null:new f("Invalid "+n+" `"+o+"` supplied to "+("`"+r+"`, expected a ReactNode."))}return p(e)}function O(e){function t(t,r,n,o,i){var a=t[r],s=k(a);if("object"!==s)return new f("Invalid "+o+" `"+i+"` of type `"+s+"` "+("supplied to `"+n+"`, expected `object`."));for(var c in e){var l=e[c];if(l){var p=l(a,c,n,o,i+"."+c,u);if(p)return p}}return null}return p(t)}function S(e){function t(t,r,n,o,i){var s=t[r],c=k(s);if("object"!==c)return new f("Invalid "+o+" `"+i+"` of type `"+c+"` "+("supplied to `"+n+"`, expected `object`."));var l=a({},t[r],e);for(var p in l){var d=e[p];if(!d)return new f("Invalid "+o+" `"+i+"` key `"+p+"` supplied to `"+n+"`.\nBad object: "+JSON.stringify(t[r],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var h=d(s,p,n,o,i+"."+p,u);if(h)return h}return null}return p(t)}function x(t){switch(typeof t){case"number":case"string":case"undefined":return!0;case"boolean":return!t;case"object":if(Array.isArray(t))return t.every(x);if(null===t||e(t))return!0;var r=c(t);if(!r)return!1;var n,o=r.call(t);if(r!==t.entries){for(;!(n=o.next()).done;)if(!x(n.value))return!1}else for(;!(n=o.next()).done;){var i=n.value;if(i&&!x(i[1]))return!1}return!0;default:return!1}}function E(e,t){return"symbol"===e||("Symbol"===t["@@toStringTag"]||"function"==typeof Symbol&&t instanceof Symbol)}function k(e){var t=typeof e;return Array.isArray(e)?"array":e instanceof RegExp?"object":E(t,e)?"symbol":t}function j(e){if("undefined"==typeof e||null===e)return""+e;var t=k(e);if("object"===t){if(e instanceof Date)return"date";if(e instanceof RegExp)return"regexp"}return t}function R(e){var t=j(e);switch(t){case"array":case"object":return"an "+t;case"boolean":case"date":case"regexp":return"a "+t;default:return t}}function _(e){return e.constructor&&e.constructor.name?e.constructor.name:N}var z="function"==typeof Symbol&&Symbol.iterator,P="@@iterator",N="<<anonymous>>",H={array:d("array"),bool:d("boolean"),func:d("function"),number:d("number"),object:d("object"),string:d("string"),symbol:d("symbol"),any:h(),arrayOf:v,element:y(),instanceOf:m,node:T(),objectOf:g,oneOf:b,oneOfType:w,shape:O,exact:S};return f.prototype=Error.prototype,H.checkPropTypes=s,H.PropTypes=H,H}}).call(t,r(1))},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),s=r(8),c=r(7),l=n(c),f=r(16),p=n(f),d="function"==typeof p.default.createPortal,h="undefined"!=typeof window,v=function(e){function t(){return o(this,t),i(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return a(t,e),u(t,[{key:"componentWillMount",value:function(){h&&(this.popup=document.createElement("div"),document.body.appendChild(this.popup),this.renderLayer())}},{key:"componentDidUpdate",value:function(){this.renderLayer()}},{key:"componentWillUnmount",value:function(){d||p.default.unmountComponentAtNode(this.popup),document.body.removeChild(this.popup)}},{key:"renderLayer",value:function(){d||p.default.unstable_renderSubtreeIntoContainer(this,this.props.children,this.popup)}},{key:"render",value:function(){return d?p.default.createPortal(this.props.children,this.popup):null}}]),t}(s.Component);v.propTypes={children:l.default.node},t.default=v},function(e,r){e.exports=t}])});

63

example/index.jsx

@@ -32,3 +32,3 @@ import React from 'react';

bodyClick(e) {
if (this.tipContentRef.contains(e.target) || this.buttonRef.contains(e.target)) {
if ((this.tipContentRef && this.tipContentRef.contains(e.target)) || this.buttonRef.contains(e.target)) {
return;

@@ -50,11 +50,11 @@ }

<div className="flex-spread">
<Tooltip content="By default the text is above the element" className="target">
<Tooltip content="By default the text is above the element" className="target" tipContentClassName="foo">
Target
</Tooltip>
<Tooltip content="It'll center if it has room" className="target">
<Tooltip content="It'll center if it has room" className="target" tipContentClassName="">
Target
</Tooltip>
<Tooltip content="you can specify 'direction' (up, down, left, right) too" direction="down" className="target">
<Tooltip content="you can specify 'direction' (up, down, left, right) too" direction="down" className="target" tipContentClassName="">
t

@@ -78,3 +78,4 @@ </Tooltip>

</Tooltip>.
</p>
You can also force the direction of the tip and it will allow itself <Tooltip className="target" tipContentClassName="" content="this direction is forced" direction="right" tagName="span" forceDirection>to go off screen</Tooltip>.
</p>
</section>

@@ -102,2 +103,3 @@

className="target"
tipContentClassName=""
>

@@ -119,2 +121,3 @@ Html content

className="target"
tipContentClassName=""
tipContentHover

@@ -130,3 +133,3 @@ >

You can pass <Tooltip tagName="span" className="target" color="blue" background="red" content="The color for this is defined by props">
You can pass <Tooltip tagName="span" className="target" tipContentClassName="" color="blue" background="red" content="The color for this is defined by props">
color options as props

@@ -176,3 +179,3 @@ </Tooltip> or use a&nbsp;

<p>
<Tooltip content="this uses hover but also closes on click" className="target" tagName="span" eventOff="onClick">
<Tooltip content="this uses hover but also closes on click" className="target" tipContentClassName="" tagName="span" eventOff="onClick">
Close on click

@@ -186,2 +189,3 @@ </Tooltip>

className="target"
tipContentClassName=""
tagName="span"

@@ -197,3 +201,3 @@ eventOn="onClick"

<p>
<Tooltip content="this uses hover but also closes on click" className="target" tagName="span" eventToggle="onClick">
<Tooltip content="this uses hover but also closes on click" className="target" tipContentClassName="" tagName="span" eventToggle="onClick">
Toggle on click

@@ -209,3 +213,3 @@ </Tooltip>

<p>
<Tooltip content="styled with defaults" className="target" useDefaultStyles tagName="span">
<Tooltip content="styled with defaults" className="target" tipContentClassName="" useDefaultStyles tagName="span">
See default styles

@@ -233,2 +237,3 @@ </Tooltip>

direction="down"
forceDirection
>

@@ -243,6 +248,6 @@ click the button

<div className="flex-spread">
<Tooltip content="This has an arrowSize of 20, where the default is 10" className="target" arrowSize={20}>Larger arrowSize</Tooltip>
<Tooltip content="This has an arrowSize of 5, where the default is 10" className="target" arrowSize={5}>Smaller arrowSize</Tooltip>
<Tooltip content="This has a distance prop of 20, where the default is arrowSize" className="target" distance={20}>Increase distance</Tooltip>
<Tooltip content="This has a distance prop of 0, where the default is the arrowSize" className="target" distance={0}>Decrease distance</Tooltip>
<Tooltip content="This has an arrowSize of 20, where the default is 10" className="target" tipContentClassName="" arrowSize={20}>Larger arrowSize</Tooltip>
<Tooltip content="This has an arrowSize of 5, where the default is 10" className="target" tipContentClassName="" arrowSize={5}>Smaller arrowSize</Tooltip>
<Tooltip content="This has a distance prop of 20, where the default is arrowSize" className="target" tipContentClassName="" distance={20}>Increase distance</Tooltip>
<Tooltip content="This has a distance prop of 0, where the default is the arrowSize" className="target" tipContentClassName="" distance={0}>Decrease distance</Tooltip>
</div>

@@ -255,31 +260,31 @@ </section>

<div className="flex-spread">
<Tooltip content="you can have compound alignments" direction="right-start" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="right-start" className="target" tipContentClassName="" arrow={false}>
right-start
</Tooltip>
<Tooltip content="you can have compound alignments" direction="right-end" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="right-end" className="target" tipContentClassName="" arrow={false}>
right-end
</Tooltip>
<Tooltip content="you can have compound alignments" direction="left-start" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="left-start" className="target" tipContentClassName="" arrow={false}>
left-start
</Tooltip>
<Tooltip content="you can have compound alignments" direction="left-end" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="left-end" className="target" tipContentClassName="" arrow={false}>
left-end
</Tooltip>
<Tooltip content="you can have compound alignments" direction="up-start" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="up-start" className="target" tipContentClassName="" arrow={false}>
top-start
</Tooltip>
<Tooltip content="you can have compound alignments" direction="up-end" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="up-end" className="target" tipContentClassName="" arrow={false}>
top-end
</Tooltip>
<Tooltip content="you can have compound alignments" direction="down-start" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="down-start" className="target" tipContentClassName="" arrow={false}>
down-start
</Tooltip>
<Tooltip content="you can have compound alignments" direction="down-end" className="target" arrow={false}>
<Tooltip content="you can have compound alignments" direction="down-end" className="target" tipContentClassName="" arrow={false}>
down-end

@@ -291,31 +296,31 @@ </Tooltip>

<div className="flex-spread">
<Tooltip content="you can have compound alignments" direction="right-start" className="target">
<Tooltip content="you can have compound alignments" direction="right-start" className="target" tipContentClassName="">
right-start with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="right-end" className="target">
<Tooltip content="you can have compound alignments" direction="right-end" className="target" tipContentClassName="">
right-end with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="left-start" className="target">
<Tooltip content="you can have compound alignments" direction="left-start" className="target" tipContentClassName="">
left-start with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="left-end" className="target">
<Tooltip content="you can have compound alignments" direction="left-end" className="target" tipContentClassName="">
left-end with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="down-start" className="target">
<Tooltip content="you can have compound alignments" direction="down-start" className="target" tipContentClassName="">
down-start with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="down-end" className="target">
<Tooltip content="you can have compound alignments" direction="down-end" className="target" tipContentClassName="">
down-end with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="up-start" className="target">
<Tooltip content="you can have compound alignments" direction="up-start" className="target" tipContentClassName="">
up-start with arrow
</Tooltip>
<Tooltip content="you can have compound alignments" direction="up-end" className="target">
<Tooltip content="you can have compound alignments" direction="up-end" className="target" tipContentClassName="">
up-end with arrow

@@ -322,0 +327,0 @@ </Tooltip>

2

package.json
{
"name": "react-tooltip-lite",
"version": "1.8.0",
"version": "1.9.1",
"description": "React tooltip, focused on simplicity and performance",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

27

README.md

@@ -79,7 +79,26 @@ # React tooltip-lite

<tr>
<td>forceDirection</td>
<td>boolean</td>
<td>Tells the tip to allow itself to render out of view if there's not room for the specified direction. If undefined or false, the tip will change direction as needed to render within the confines of the window.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>css class added to the rendered wrapper</td>
<td>
css class added to the rendered wrapper (and the tooltip if tooltipClassName is undefined)
NOTE: in future versions className will only be applied to the wrapper element and not the tooltip
</td>
</tr>
<tr>
<td>tipContentClassName</td>
<td>string</td>
<td>css class added to the tooltip</td>
</tr>
<tr>
<td>tipContentHover</td>
<td>boolean</td>
<td>defines whether you should be able to hover over the tip contents for links and copying content,
defaults to false.</a>
</tr>
<tr>
<td>background</td>

@@ -135,8 +154,2 @@ <td>string</td>

<tr>
<td>tipContentHover</td>
<td>boolean</td>
<td>defines whether you should be able to hover over the tip contents for links and copying content,
defaults to false.</a>
</tr>
<tr>
<td>hoverDelay</td>

@@ -143,0 +156,0 @@ <td>number</td>

example/index.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc