diff --git a/.gitignore b/.gitignore index 3aaeed09e..57ee62443 100644 --- a/.gitignore +++ b/.gitignore @@ -10,4 +10,5 @@ # files node_modules/ -example/dist +example/dist/ +dist/ diff --git a/.npmignore b/.npmignore index c0726ba98..a30c5b04f 100644 --- a/.npmignore +++ b/.npmignore @@ -12,4 +12,4 @@ CHANGELOG.md // setting files .babelrc -circle.yml +.travis.yml diff --git a/Makefile b/Makefile index 284c57819..8a49d43a3 100644 --- a/Makefile +++ b/Makefile @@ -24,7 +24,6 @@ genStand: @rm -rf $(STANDALONE) && mkdir $(STANDALONE) @$(NODE_BIN)/browserify -t babelify -t browserify-shim $(SRC)/index.js --standalone ReactTooltip -o $(STANDALONE)/react-tooltip.js @$(NODE_BIN)/browserify -t babelify -t browserify-shim $(SRC)/index.js --standalone ReactTooltip | $(NODE_BIN)/uglifyjs > $(STANDALONE)/react-tooltip.min.js - @cp $(DIST)/style.js $(STANDALONE)/style.js devJS: @$(NODE_BIN)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv @@ -46,20 +45,12 @@ dev: deployJS: @echo Generating deploy JS files... - @$(NODE_BIN)/babel $(SRC)/index.js -o $(DIST)/react-tooltip.js - @$(NODE_BIN)/babel $(SRC)/style.js -o $(DIST)/style.js - @$(NODE_BIN)/babel $(SRC)/index.js | $(NODE_BIN)/uglifyjs > $(DIST)/react-tooltip.min.js - -deployCSS: - @echo Generating deploy CSS files... - @cp $(SRC)/index.scss $(DIST)/react-tooltip.scss - @$(NODE_BIN)/node-sass --output-style compressed $(SRC)/index.scss $(DIST)/react-tooltip.min.css + @$(NODE_BIN)/babel $(SRC) --out-dir $(DIST) deploy: lint @echo Deploy... @rm -rf dist && mkdir dist @make convertCSS - @make deployCSS @make deployJS @make genStand @echo success! diff --git a/dist/react-tooltip.js b/dist/react-tooltip.js deleted file mode 100644 index 3d23cd3eb..000000000 --- a/dist/react-tooltip.js +++ /dev/null @@ -1,415 +0,0 @@ -'use strict'; - -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); - -var _class, _class2, _temp; - -/* Decoraters */ - - -/* Utils */ - - -/* CSS */ - - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactDom = require('react-dom'); - -var _reactDom2 = _interopRequireDefault(_reactDom); - -var _classnames = require('classnames'); - -var _classnames2 = _interopRequireDefault(_classnames); - -var _staticMethods = require('./decorators/staticMethods'); - -var _staticMethods2 = _interopRequireDefault(_staticMethods); - -var _windowListener = require('./decorators/windowListener'); - -var _windowListener2 = _interopRequireDefault(_windowListener); - -var _customEvent = require('./decorators/customEvent'); - -var _customEvent2 = _interopRequireDefault(_customEvent); - -var _isCapture = require('./decorators/isCapture'); - -var _isCapture2 = _interopRequireDefault(_isCapture); - -var _getPosition = require('./utils/getPosition'); - -var _getPosition2 = _interopRequireDefault(_getPosition); - -var _getTipContent = require('./utils/getTipContent'); - -var _getTipContent2 = _interopRequireDefault(_getTipContent); - -var _style = require('./style'); - -var _style2 = _interopRequireDefault(_style); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - -var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.default)(_class = (0, _customEvent2.default)(_class = (0, _isCapture2.default)(_class = (_temp = _class2 = function (_Component) { - _inherits(ReactTooltip, _Component); - - function ReactTooltip(props) { - _classCallCheck(this, ReactTooltip); - - var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(ReactTooltip).call(this, props)); - - _this.state = { - place: 'top', // Direction of tooltip - type: 'dark', // Color theme of tooltip - effect: 'float', // float or fixed - show: false, - border: false, - placeholder: '', - offset: {}, - extraClass: '', - html: false, - delayHide: 0, - delayShow: 0, - event: props.event || null, - eventOff: props.eventOff || null, - currentEvent: null, // Current mouse event - currentTarget: null // Current target of mouse event - }; - - _this.mount = true; - _this.delayShowLoop = null; - _this.delayHideLoop = null; - return _this; - } - - _createClass(ReactTooltip, [{ - key: 'componentDidMount', - value: function componentDidMount() { - this.setStyleHeader(); // Set the style to the - this.bindListener(); // Bind listener for tooltip - this.bindWindowEvents(); // Bind global event for static method - } - }, { - key: 'componentWillUnmount', - value: function componentWillUnmount() { - this.mount = false; - - clearTimeout(this.delayShowLoop); - clearTimeout(this.delayHideLoop); - - this.unbindListener(); - this.removeScrollListener(); - this.unbindWindowEvents(); - } - - /** - * Pick out corresponded target elements - */ - - }, { - key: 'getTargetArray', - value: function getTargetArray(id) { - var targetArray = void 0; - - if (!id) { - targetArray = document.querySelectorAll('[data-tip]:not([data-for])'); - } else { - targetArray = document.querySelectorAll('[data-tip][data-for=' + id + ']'); - } - - // targetArray is a NodeList, convert it to a real array - // I hope I can use Object.values... - return Object.keys(targetArray).filter(function (key) { - return key !== 'length'; - }).map(function (key) { - return targetArray[key]; - }); - } - - /** - * Bind listener to the target elements - * These listeners used to trigger showing or hiding the tooltip - */ - - }, { - key: 'bindListener', - value: function bindListener() { - var _this2 = this; - - var _props = this.props; - var id = _props.id; - var globalEventOff = _props.globalEventOff; - - var targetArray = this.getTargetArray(id); - - targetArray.forEach(function (target) { - var isCaptureMode = _this2.isCapture(target); - if (target.getAttribute('currentItem') === null) { - target.setAttribute('currentItem', 'false'); - } - - if (_this2.isCustomEvent(target)) { - _this2.customBindListener(target); - return; - } - - target.removeEventListener('mouseenter', _this2.showTooltip); - target.addEventListener('mouseenter', _this2.showTooltip.bind(_this2), isCaptureMode); - if (_this2.state.effect === 'float') { - target.removeEventListener('mousemove', _this2.updateTooltip); - target.addEventListener('mousemove', _this2.updateTooltip.bind(_this2), isCaptureMode); - } - - target.removeEventListener('mouseleave', _this2.hideTooltip); - target.addEventListener('mouseleave', _this2.hideTooltip.bind(_this2), isCaptureMode); - }); - - // Global event to hide tooltip - if (globalEventOff) { - window.removeEventListener(globalEventOff, this.hideTooltip); - window.addEventListener(globalEventOff, this.hideTooltip.bind(this), false); - } - } - - /** - * Unbind listeners on target elements - */ - - }, { - key: 'unbindListener', - value: function unbindListener() { - var _this3 = this; - - var _props2 = this.props; - var id = _props2.id; - var globalEventOff = _props2.globalEventOff; - - var targetArray = this.getTargetArray(id); - - targetArray.forEach(function (target) { - if (_this3.isCustomEvent(target)) { - _this3.customUnbindListener(target); - return; - } - - target.removeEventListener('mouseenter', _this3.showTooltip); - target.removeEventListener('mousemove', _this3.updateTooltip); - target.removeEventListener('mouseleave', _this3.hideTooltip); - }); - - if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip); - } - - /** - * When mouse enter, show the tooltip - */ - - }, { - key: 'showTooltip', - value: function showTooltip(e) { - var _this4 = this; - - // Get the tooltip content - // calculate in this phrase so that tip width height can be detected - var _props3 = this.props; - var children = _props3.children; - var multiline = _props3.multiline; - - var originTooltip = e.currentTarget.getAttribute('data-tip'); - var isMultiline = e.currentTarget.getAttribute('data-multiline') || multiline || false; - var placeholder = (0, _getTipContent2.default)(originTooltip, children, isMultiline); - - this.setState({ - placeholder: placeholder, - place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top', - type: e.currentTarget.getAttribute('data-type') || this.props.type || 'dark', - effect: e.currentTarget.getAttribute('data-effect') || this.props.effect || 'float', - offset: e.currentTarget.getAttribute('data-offset') || this.props.offset || {}, - 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') === 'true' || this.props.border || false, - extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '' - }, function () { - _this4.addScrollListener(e); - _this4.updateTooltip(e); - }); - } - - /** - * When mouse hover, updatetooltip - */ - - }, { - key: 'updateTooltip', - value: function updateTooltip(e) { - var _this5 = this; - - var _state = this.state; - var delayShow = _state.delayShow; - var show = _state.show; - var placeholder = this.state.placeholder; - - var delayTime = show ? 0 : parseInt(delayShow, 10); - var eventTarget = e.currentTarget; - - clearTimeout(this.delayShowLoop); - this.delayShowLoop = setTimeout(function () { - if (typeof placeholder === 'string') placeholder = placeholder.trim(); - if (Array.isArray(placeholder) && placeholder.length > 0 || placeholder) { - _this5.setState({ - currentEvent: e, - currentTarget: eventTarget, - show: true - }, function () { - _this5.updatePosition(); - }); - } - }, delayTime); - } - - /** - * When mouse leave, hide tooltip - */ - - }, { - key: 'hideTooltip', - value: function hideTooltip() { - var _this6 = this; - - var delayHide = this.state.delayHide; - - - if (!this.mount) return; - - clearTimeout(this.delayShowLoop); - clearTimeout(this.delayHideLoop); - this.delayHideLoop = setTimeout(function () { - _this6.setState({ - show: false - }); - _this6.removeScrollListener(); - }, parseInt(delayHide, 10)); - } - - /** - * Add scroll eventlistener when tooltip show - * automatically hide the tooltip when scrolling - */ - - }, { - key: 'addScrollListener', - value: function addScrollListener(e) { - var isCaptureMode = this.isCapture(e.currentTarget); - window.addEventListener('scroll', this.hideTooltip.bind(this), isCaptureMode); - } - }, { - key: 'removeScrollListener', - value: function removeScrollListener() { - window.removeEventListener('scroll', this.hideTooltip); - } - - // Calculation the position - - }, { - key: 'updatePosition', - value: function updatePosition() { - var _this7 = this; - - var _state2 = this.state; - var currentEvent = _state2.currentEvent; - var currentTarget = _state2.currentTarget; - var place = _state2.place; - var effect = _state2.effect; - var offset = _state2.offset; - - var node = _reactDom2.default.findDOMNode(this); - - var result = (0, _getPosition2.default)(currentEvent, currentTarget, node, place, effect, offset); - if (result.isNewState) { - // Switch to reverse placement - return this.setState(result.newState, function () { - _this7.updatePosition(); - }); - } - // Set tooltip position - node.style.left = result.position.left + 'px'; - node.style.top = result.position.top + 'px'; - } - - /** - * Set style tag in header - * in this way we can insert default css - */ - - }, { - key: 'setStyleHeader', - value: function setStyleHeader() { - if (!document.getElementsByTagName('head')[0].querySelector('style[id="react-tooltip"]')) { - var tag = document.createElement('style'); - tag.id = 'react-tooltip'; - tag.innerHTML = _style2.default; - document.getElementsByTagName('head')[0].appendChild(tag); - } - } - }, { - key: 'render', - value: function render() { - var _state3 = this.state; - var placeholder = _state3.placeholder; - var extraClass = _state3.extraClass; - var html = _state3.html; - - var tooltipClass = (0, _classnames2.default)('__react_component_tooltip', { 'show': this.state.show }, { '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' }); - - if (html) { - return _react2.default.createElement('div', { className: tooltipClass + ' ' + extraClass, - 'data-id': 'tooltip', - dangerouslySetInnerHTML: { __html: placeholder } }); - } else { - return _react2.default.createElement( - 'div', - { className: tooltipClass + ' ' + extraClass, - 'data-id': 'tooltip' }, - placeholder - ); - } - } - }]); - - return ReactTooltip; -}(_react.Component), _class2.propTypes = { - children: _react.PropTypes.any, - place: _react.PropTypes.string, - type: _react.PropTypes.string, - effect: _react.PropTypes.string, - offset: _react.PropTypes.object, - multiline: _react.PropTypes.bool, - border: _react.PropTypes.bool, - class: _react.PropTypes.string, - id: _react.PropTypes.string, - html: _react.PropTypes.bool, - delayHide: _react.PropTypes.number, - delayShow: _react.PropTypes.number, - event: _react.PropTypes.string, - eventOff: _react.PropTypes.string, - watchWindow: _react.PropTypes.bool, - isCapture: _react.PropTypes.bool, - globalEventOff: _react.PropTypes.string -}, _temp)) || _class) || _class) || _class) || _class; - -/* export default not fit for standalone, it will exports {default:...} */ - - -module.exports = ReactTooltip; diff --git a/dist/react-tooltip.min.css b/dist/react-tooltip.min.css deleted file mode 100644 index a765e37b6..000000000 --- a/dist/react-tooltip.min.css +++ /dev/null @@ -1 +0,0 @@ -.__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 , margin-top 0.3s ease-out, margin-left 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} diff --git a/dist/react-tooltip.min.js b/dist/react-tooltip.min.js deleted file mode 100644 index aa9d42e54..000000000 --- a/dist/react-tooltip.min.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i0||placeholder){_this5.setState({currentEvent:e,currentTarget:eventTarget,show:true},function(){_this5.updatePosition()})}},delayTime)}},{key:"hideTooltip",value:function hideTooltip(){var _this6=this;var delayHide=this.state.delayHide;if(!this.mount)return;clearTimeout(this.delayShowLoop);clearTimeout(this.delayHideLoop);this.delayHideLoop=setTimeout(function(){_this6.setState({show:false});_this6.removeScrollListener()},parseInt(delayHide,10))}},{key:"addScrollListener",value:function addScrollListener(e){var isCaptureMode=this.isCapture(e.currentTarget);window.addEventListener("scroll",this.hideTooltip.bind(this),isCaptureMode)}},{key:"removeScrollListener",value:function removeScrollListener(){window.removeEventListener("scroll",this.hideTooltip)}},{key:"updatePosition",value:function updatePosition(){var _this7=this;var _state2=this.state;var currentEvent=_state2.currentEvent;var currentTarget=_state2.currentTarget;var place=_state2.place;var effect=_state2.effect;var offset=_state2.offset;var node=_reactDom2.default.findDOMNode(this);var result=(0,_getPosition2.default)(currentEvent,currentTarget,node,place,effect,offset);if(result.isNewState){return this.setState(result.newState,function(){_this7.updatePosition()})}node.style.left=result.position.left+"px";node.style.top=result.position.top+"px"}},{key:"setStyleHeader",value:function setStyleHeader(){if(!document.getElementsByTagName("head")[0].querySelector('style[id="react-tooltip"]')){var tag=document.createElement("style");tag.id="react-tooltip";tag.innerHTML=_style2.default;document.getElementsByTagName("head")[0].appendChild(tag)}}},{key:"render",value:function render(){var _state3=this.state;var placeholder=_state3.placeholder;var extraClass=_state3.extraClass;var html=_state3.html;var tooltipClass=(0,_classnames2.default)("__react_component_tooltip",{show:this.state.show},{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"});if(html){return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip",dangerouslySetInnerHTML:{__html:placeholder}})}else{return _react2.default.createElement("div",{className:tooltipClass+" "+extraClass,"data-id":"tooltip"},placeholder)}}}]);return ReactTooltip}(_react.Component),_class2.propTypes={children:_react.PropTypes.any,place:_react.PropTypes.string,type:_react.PropTypes.string,effect:_react.PropTypes.string,offset:_react.PropTypes.object,multiline:_react.PropTypes.bool,border:_react.PropTypes.bool,"class":_react.PropTypes.string,id:_react.PropTypes.string,html:_react.PropTypes.bool,delayHide:_react.PropTypes.number,delayShow:_react.PropTypes.number,event:_react.PropTypes.string,eventOff:_react.PropTypes.string,watchWindow:_react.PropTypes.bool,isCapture:_react.PropTypes.bool,globalEventOff:_react.PropTypes.string},_temp))||_class)||_class)||_class)||_class;module.exports=ReactTooltip; \ No newline at end of file diff --git a/dist/react-tooltip.scss b/dist/react-tooltip.scss deleted file mode 100644 index fd0c2b7a8..000000000 --- a/dist/react-tooltip.scss +++ /dev/null @@ -1,199 +0,0 @@ -@mixin type($background-color) { - background-color: $background-color; - &.place-top { - &:after { - border-top-color: $background-color; - border-top-style: solid; - border-top-width: 6px; - } - } - &.place-bottom { - &:after { - border-bottom-color: $background-color; - border-bottom-style: solid; - border-bottom-width: 6px; - } - } - &.place-left { - &:after { - border-left-color: $background-color; - border-left-style: solid; - border-left-width: 6px; - } - } - &.place-right { - &:after { - border-right-color: $background-color; - border-right-style: solid; - border-right-width: 6px; - } - } -} - -@mixin border($border-color) { - border: 1px solid $border-color; - &.place-top { - &:before { - border-top: 8px solid $border-color; - } - } - &.place-bottom { - &:before { - border-bottom: 8px solid $border-color; - } - } - &.place-left { - &:before { - border-left: 8px solid $border-color; - } - } - &.place-right { - &:before { - border-right: 8px solid $border-color; - } - } -} - -.__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 , margin-top 0.3s ease-out, margin-left 0.3s ease-out; - top: -999em; - visibility: hidden; - z-index: 999; - &:before, - &:after { - content: ""; - width: 0; - height: 0; - position: absolute; - } - &.show { - opacity: 0.9; - margin-top: 0px; - margin-left: 0px; - visibility: visible; - } - &.type-dark { - color: #fff; - @include type(#222); - &.border { - @include border(#fff); - } - } - &.type-success { - color: #fff; - @include type(#8DC572); - &.border { - @include border(#fff); - } - } - &.type-warning { - color: #fff; - @include type(#F0AD4E); - &.border { - @include border(#fff); - } - } - &.type-error { - color: #fff; - @include type(#BE6464); - &.border { - @include border(#fff); - } - } - &.type-info { - color: #fff; - @include type(#337AB7); - &.border { - @include border(#fff); - } - } - &.type-light { - color: #222; - @include type(#fff); - &.border { - @include border(#222); - } - } - // Place - &.place-top { - margin-top: -10px; - &:before { - border-left: 10px solid transparent; - border-right: 10px solid transparent; - bottom: -8px; - left: 50%; - margin-left: -10px; - } - &:after { - border-left: 8px solid transparent; - border-right: 8px solid transparent; - bottom: -6px; - left: 50%; - margin-left: -8px; - } - } - &.place-bottom { - margin-top: 10px; - &:before { - border-left: 10px solid transparent; - border-right: 10px solid transparent; - top: -8px; - left: 50%; - margin-left: -10px; - } - &:after { - border-left: 8px solid transparent; - border-right: 8px solid transparent; - top: -6px; - left: 50%; - margin-left: -8px; - } - } - &.place-left { - margin-left: -10px; - &:before { - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - right: -8px; - top: 50%; - margin-top: -5px; - } - &:after { - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - right: -6px; - top: 50%; - margin-top: -4px; - } - } - &.place-right { - margin-left: 10px; - &:before { - border-top: 6px solid transparent; - border-bottom: 6px solid transparent; - left: -8px; - top: 50%; - margin-top: -5px; - } - &:after { - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - left: -6px; - top: 50%; - margin-top: -4px; - } - } - .multi-line { - display: block; - padding: 2px 0px; - text-align: center; - } -} diff --git a/dist/style.js b/dist/style.js index 0618d4d2a..9e65543f9 100644 --- a/dist/style.js +++ b/dist/style.js @@ -3,4 +3,4 @@ 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 , margin-top 0.3s ease-out, margin-left 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 , margin-top 0.3s ease-out, margin-left 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 diff --git a/index.js b/index.js deleted file mode 100644 index 00a3d6ad1..000000000 --- a/index.js +++ /dev/null @@ -1,3 +0,0 @@ -'use strict' - -module.exports = require('./dist/react-tooltip') diff --git a/package.json b/package.json index f7ea9137a..54dc32d0e 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,8 @@ { "name": "react-tooltip", - "version": "3.0.1", + "version": "3.0.3", "description": "react tooltip component", - "main": "index.js", + "main": "dist/index.js", "scripts": { "test": "make test", "dev": "make start", diff --git a/standalone/style.js b/standalone/style.js deleted file mode 100644 index 0618d4d2a..000000000 --- a/standalone/style.js +++ /dev/null @@ -1,6 +0,0 @@ -'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 , margin-top 0.3s ease-out, margin-left 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}';