react-tooltip - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

dist/react-tooltip.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
-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 _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
-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 _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _react = require('react');
@@ -29,68 +43,62 @@
 
-var ReactTooltip = (function (_Component) {
-  _inherits(ReactTooltip, _Component);
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-  /**
-   * Class method
-   * @see ReactTooltip.hide() && ReactTooltup.rebuild()
-   */
+var ReactTooltip = function (_React$Component) {
+  (0, _inherits3.default)(ReactTooltip, _React$Component);
+  (0, _createClass3.default)(ReactTooltip, [{
+    key: 'globalHide',
+    value: function globalHide() {
+      if (this.mount) {
+        this.hideTooltip();
+      }
+    }
+  }, {
+    key: 'globalRebuild',
+    value: function globalRebuild() {
+      if (this.mount) {
+        this.unbindListener();
+        this.bindListener();
+      }
+    }
+  }], [{
+    key: 'hide',
 
-  ReactTooltip.hide = function hide() {
     /**
-     * Check for ie
-     * @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
+     * Class method
+     * @see ReactTooltip.hide() && ReactTooltup.rebuild()
      */
-    if (typeof window.Event === 'function') {
-      window.dispatchEvent(new window.Event('__react_tooltip_hide_event'));
-    } else {
-      var _event = document.createEvent('Event');
-      _event.initEvent('__react_tooltip_hide_event', false, true);
-      window.dispatchEvent(_event);
+    value: function hide() {
+      /**
+       * Check for ie
+       * @see http://stackoverflow.com/questions/26596123/internet-explorer-9-10-11-event-constructor-doesnt-work
+       */
+      if (typeof window.Event === 'function') {
+        window.dispatchEvent(new window.Event('__react_tooltip_hide_event'));
+      } else {
+        var event = document.createEvent('Event');
+        event.initEvent('__react_tooltip_hide_event', false, true);
+        window.dispatchEvent(event);
+      }
     }
-  };
-
-  ReactTooltip.rebuild = function rebuild() {
-    if (typeof window.Event === 'function') {
-      window.dispatchEvent(new window.Event('__react_tooltip_rebuild_event'));
-    } else {
-      var _event2 = document.createEvent('Event');
-      _event2.initEvent('__react_tooltip_rebuild_event', false, true);
-      window.dispatchEvent(_event2);
+  }, {
+    key: 'rebuild',
+    value: function rebuild() {
+      if (typeof window.Event === 'function') {
+        window.dispatchEvent(new window.Event('__react_tooltip_rebuild_event'));
+      } else {
+        var event = document.createEvent('Event');
+        event.initEvent('__react_tooltip_rebuild_event', false, true);
+        window.dispatchEvent(event);
+      }
     }
-  };
-
-  ReactTooltip.prototype.globalHide = function globalHide() {
-    if (this.mount) {
-      this.hideTooltip();
-    }
-  };
-
-  ReactTooltip.prototype.globalRebuild = function globalRebuild() {
-    if (this.mount) {
-      this.unbindListener();
-      this.bindListener();
-    }
-  };
-
-  _createClass(ReactTooltip, null, [{
-    key: 'displayName',
-    value: 'ReactTooltip',
-    enumerable: true
-  }, {
-    key: 'eventHideMark',
-    value: 'hide' + Date.now(),
-    enumerable: true
-  }, {
-    key: 'eventRebuildMark',
-    value: 'rebuild' + Date.now(),
-    enumerable: true
   }]);
 
   function ReactTooltip(props) {
-    _classCallCheck(this, ReactTooltip);
+    (0, _classCallCheck3.default)(this, ReactTooltip);
 
-    _Component.call(this, props);
-    this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize', 'bindClickListener', 'globalHide', 'globalRebuild');
-    this.mount = true;
-    this.state = {
+    var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ReactTooltip).call(this, props));
+
+    _this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize', 'bindClickListener', 'globalHide', 'globalRebuild');
+    _this.mount = true;
+    _this.state = {
       show: false,
@@ -113,3 +121,4 @@ border: false,
     };
-    this.delayShowLoop = null;
+    _this.delayShowLoop = null;
+    return _this;
   }
@@ -119,520 +128,556 @@
 
-  ReactTooltip.prototype._bind = function _bind() {
-    var _this = this;
 
-    for (var _len = arguments.length, handlers = Array(_len), _key = 0; _key < _len; _key++) {
-      handlers[_key] = arguments[_key];
-    }
+  (0, _createClass3.default)(ReactTooltip, [{
+    key: '_bind',
+    value: function _bind() {
+      var _this2 = this;
 
-    handlers.forEach(function (handler) {
-      return _this[handler] = _this[handler].bind(_this);
-    });
-  };
+      for (var _len = arguments.length, handlers = Array(_len), _key = 0; _key < _len; _key++) {
+        handlers[_key] = arguments[_key];
+      }
 
-  ReactTooltip.prototype.componentDidMount = function componentDidMount() {
-    this.bindListener();
-    this.setStyleHeader();
-    /* Add window event listener for hide and rebuild */
-    window.removeEventListener('__react_tooltip_hide_event', this.globalHide);
-    window.addEventListener('__react_tooltip_hide_event', this.globalHide, false);
+      handlers.forEach(function (handler) {
+        return _this2[handler] = _this2[handler].bind(_this2);
+      });
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.bindListener();
+      this.setStyleHeader();
+      /* Add window event listener for hide and rebuild */
+      window.removeEventListener('__react_tooltip_hide_event', this.globalHide);
+      window.addEventListener('__react_tooltip_hide_event', this.globalHide, false);
 
-    window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild);
-    window.addEventListener('__react_tooltip_rebuild_event', this.globalRebuild, false);
-    /* Add listener on window resize  */
-    window.removeEventListener('resize', this.onWindowResize);
-    window.addEventListener('resize', this.onWindowResize, false);
-  };
+      window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild);
+      window.addEventListener('__react_tooltip_rebuild_event', this.globalRebuild, false);
+      /* Add listener on window resize  */
+      window.removeEventListener('resize', this.onWindowResize);
+      window.addEventListener('resize', this.onWindowResize, false);
+    }
+  }, {
+    key: 'componentWillUpdate',
+    value: function componentWillUpdate() {
+      this.unbindListener();
+    }
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.updatePosition();
+      this.bindListener();
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      clearTimeout(this.delayShowLoop);
+      this.unbindListener();
+      this.removeScrollListener();
+      this.mount = false;
+      window.removeEventListener('__react_tooltip_hide_event', this.globalHide);
+      window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild);
+      window.removeEventListener('resize', this.onWindowResize);
+    }
 
-  ReactTooltip.prototype.componentWillUpdate = function componentWillUpdate() {
-    this.unbindListener();
-  };
+    /* TODO: optimize, bind has been trigger too many times */
 
-  ReactTooltip.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.updatePosition();
-    this.bindListener();
-  };
+  }, {
+    key: 'bindListener',
+    value: function bindListener() {
+      var targetArray = this.getTargetArray();
 
-  ReactTooltip.prototype.componentWillUnmount = function componentWillUnmount() {
-    clearTimeout(this.delayShowLoop);
-    this.unbindListener();
-    this.removeScrollListener();
-    this.mount = false;
-    window.removeEventListener('__react_tooltip_hide_event', this.globalHide);
-    window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild);
-    window.removeEventListener('resize', this.onWindowResize);
-  };
+      var dataEvent = undefined;
+      for (var i = 0; i < targetArray.length; i++) {
+        if (targetArray[i].getAttribute('currentItem') === null) {
+          targetArray[i].setAttribute('currentItem', 'false');
+        }
+        dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
+        if (dataEvent) {
+          targetArray[i].removeEventListener(dataEvent, this.checkStatus);
+          targetArray[i].addEventListener(dataEvent, this.checkStatus, false);
+        } else {
+          targetArray[i].removeEventListener('mouseenter', this.showTooltip);
+          targetArray[i].addEventListener('mouseenter', this.showTooltip, false);
 
-  /* TODO: optimize, bind has been trigger too many times */
+          if (this.state.effect === 'float') {
+            targetArray[i].removeEventListener('mousemove', this.updateTooltip);
+            targetArray[i].addEventListener('mousemove', this.updateTooltip, false);
+          }
 
-  ReactTooltip.prototype.bindListener = function bindListener() {
-    var targetArray = this.getTargetArray();
-
-    var dataEvent = undefined;
-    for (var i = 0; i < targetArray.length; i++) {
-      if (targetArray[i].getAttribute('currentItem') === null) {
-        targetArray[i].setAttribute('currentItem', 'false');
+          targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
+          targetArray[i].addEventListener('mouseleave', this.hideTooltip, false);
+        }
       }
-      dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
-      if (dataEvent) {
-        targetArray[i].removeEventListener(dataEvent, this.checkStatus);
-        targetArray[i].addEventListener(dataEvent, this.checkStatus, false);
-      } else {
-        targetArray[i].removeEventListener('mouseenter', this.showTooltip);
-        targetArray[i].addEventListener('mouseenter', this.showTooltip, false);
+    }
+  }, {
+    key: 'unbindListener',
+    value: function unbindListener() {
+      var targetArray = document.querySelectorAll('[data-tip]');
+      var dataEvent = undefined;
 
-        if (this.state.effect === 'float') {
+      for (var i = 0; i < targetArray.length; i++) {
+        dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
+        if (dataEvent) {
+          targetArray[i].removeEventListener(dataEvent, this.checkStatus);
+        } else {
+          targetArray[i].removeEventListener('mouseenter', this.showTooltip);
           targetArray[i].removeEventListener('mousemove', this.updateTooltip);
-          targetArray[i].addEventListener('mousemove', this.updateTooltip, false);
+          targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
         }
-
-        targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
-        targetArray[i].addEventListener('mouseleave', this.hideTooltip, false);
       }
     }
-  };
 
-  ReactTooltip.prototype.unbindListener = function unbindListener() {
-    var targetArray = document.querySelectorAll('[data-tip]');
-    var dataEvent = undefined;
+    /**
+     * Get all tooltip targets
+     */
 
-    for (var i = 0; i < targetArray.length; i++) {
-      dataEvent = this.state.event || targetArray[i].getAttribute('data-event');
-      if (dataEvent) {
-        targetArray[i].removeEventListener(dataEvent, this.checkStatus);
+  }, {
+    key: 'getTargetArray',
+    value: function getTargetArray() {
+      var id = this.props.id;
+
+      var targetArray = undefined;
+
+      if (id === undefined) {
+        targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
       } else {
-        targetArray[i].removeEventListener('mouseenter', this.showTooltip);
-        targetArray[i].removeEventListener('mousemove', this.updateTooltip);
-        targetArray[i].removeEventListener('mouseleave', this.hideTooltip);
+        targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]');
       }
-    }
-  };
 
-  /**
-   * Get all tooltip targets
-   */
-
-  ReactTooltip.prototype.getTargetArray = function getTargetArray() {
-    var id = this.props.id;
-
-    var targetArray = undefined;
-
-    if (id === undefined) {
-      targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
-    } else {
-      targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]');
+      return targetArray;
     }
 
-    return targetArray;
-  };
+    /**
+     * listener on window resize
+     */
 
-  /**
-   * listener on window resize
-   */
+  }, {
+    key: 'onWindowResize',
+    value: function onWindowResize() {
+      if (!this.mount) return;
+      var targetArray = this.getTargetArray();
 
-  ReactTooltip.prototype.onWindowResize = function onWindowResize() {
-    if (!this.mount) return;
-    var targetArray = this.getTargetArray();
+      for (var i = 0; i < targetArray.length; i++) {
+        if (targetArray[i].getAttribute('currentItem') === 'true') {
+          // todo: timer for performance
 
-    for (var i = 0; i < targetArray.length; i++) {
-      if (targetArray[i].getAttribute('currentItem') === 'true') {
-        // todo: timer for performance
+          var _getPosition = this.getPosition(targetArray[i]);
 
-        var _getPosition = this.getPosition(targetArray[i]);
+          var x = _getPosition.x;
+          var y = _getPosition.y;
 
-        var x = _getPosition.x;
-        var y = _getPosition.y;
-
-        _reactDom2['default'].findDOMNode(this).style.left = x + 'px';
-        _reactDom2['default'].findDOMNode(this).style.top = y + 'px';
-        /* this.setState({
-         x,
-         y
-         }) */
+          _reactDom2.default.findDOMNode(this).style.left = x + 'px';
+          _reactDom2.default.findDOMNode(this).style.top = y + 'px';
+          /* this.setState({
+           x,
+           y
+           }) */
+        }
       }
     }
-  };
 
-  /**
-   * Used in customer event
-   */
+    /**
+     * Used in customer event
+     */
 
-  ReactTooltip.prototype.checkStatus = function checkStatus(e) {
-    e.stopPropagation();
-    if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
-      this.hideTooltip(e);
-    } else {
-      e.currentTarget.setAttribute('currentItem', 'true');
-      /* when click other place, the tooltip should be removed */
-      window.removeEventListener('click', this.bindClickListener);
-      window.addEventListener('click', this.bindClickListener, false);
+  }, {
+    key: 'checkStatus',
+    value: function checkStatus(e) {
+      e.stopPropagation();
+      if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
+        this.hideTooltip(e);
+      } else {
+        e.currentTarget.setAttribute('currentItem', 'true');
+        /* when click other place, the tooltip should be removed */
+        window.removeEventListener('click', this.bindClickListener);
+        window.addEventListener('click', this.bindClickListener, false);
 
-      this.showTooltip(e);
-      this.setUntargetItems(e.currentTarget);
+        this.showTooltip(e);
+        this.setUntargetItems(e.currentTarget);
+      }
     }
-  };
-
-  ReactTooltip.prototype.setUntargetItems = function setUntargetItems(currentTarget) {
-    var targetArray = this.getTargetArray();
-    for (var i = 0; i < targetArray.length; i++) {
-      if (currentTarget !== targetArray[i]) {
-        targetArray[i].setAttribute('currentItem', 'false');
-      } else {
-        targetArray[i].setAttribute('currentItem', 'true');
+  }, {
+    key: 'setUntargetItems',
+    value: function setUntargetItems(currentTarget) {
+      var targetArray = this.getTargetArray();
+      for (var i = 0; i < targetArray.length; i++) {
+        if (currentTarget !== targetArray[i]) {
+          targetArray[i].setAttribute('currentItem', 'false');
+        } else {
+          targetArray[i].setAttribute('currentItem', 'true');
+        }
       }
     }
-  };
+  }, {
+    key: 'bindClickListener',
+    value: function bindClickListener() {
+      this.globalHide();
+      window.removeEventListener('click', this.bindClickListener);
+    }
 
-  ReactTooltip.prototype.bindClickListener = function bindClickListener() {
-    this.globalHide();
-    window.removeEventListener('click', this.bindClickListener);
-  };
+    /**
+     * When mouse enter, show update
+     */
 
-  /**
-   * When mouse enter, show update
-   */
+  }, {
+    key: 'showTooltip',
+    value: function showTooltip(e) {
+      var originTooltip = e.currentTarget.getAttribute('data-tip');
+      /* Detect multiline */
+      var regexp = /<br\s*\/?>/;
+      var multiline = e.currentTarget.getAttribute('data-multiline') ? e.currentTarget.getAttribute('data-multiline') : this.props.multiline ? this.props.multiline : false;
+      var tooltipText = undefined;
+      var multilineCount = 0;
+      if (!multiline || multiline === 'false' || !regexp.test(originTooltip)) {
+        tooltipText = originTooltip;
+      } else {
+        tooltipText = originTooltip.split(regexp).map(function (d, i) {
+          multilineCount += 1;
+          return _react2.default.createElement(
+            'span',
+            { key: i, className: 'multi-line' },
+            d
+          );
+        });
+      }
+      /* Define extra class */
+      var extraClass = e.currentTarget.getAttribute('data-class') ? e.currentTarget.getAttribute('data-class') : '';
+      extraClass = this.props.class ? this.props.class + ' ' + extraClass : extraClass;
+      this.setState({
+        placeholder: tooltipText,
+        multilineCount: multilineCount,
+        place: e.currentTarget.getAttribute('data-place') ? e.currentTarget.getAttribute('data-place') : this.props.place ? this.props.place : 'top',
+        type: e.currentTarget.getAttribute('data-type') ? e.currentTarget.getAttribute('data-type') : this.props.type ? this.props.type : 'dark',
+        effect: e.currentTarget.getAttribute('data-effect') ? e.currentTarget.getAttribute('data-effect') : this.props.effect ? this.props.effect : 'float',
+        offset: e.currentTarget.getAttribute('data-offset') ? e.currentTarget.getAttribute('data-offset') : this.props.offset ? this.props.offset : {},
+        html: e.currentTarget.getAttribute('data-html') ? e.currentTarget.getAttribute('data-html') : this.props.html ? this.props.html : false,
+        delayShow: e.currentTarget.getAttribute('data-delay-show') ? e.currentTarget.getAttribute('data-delay-show') : this.props.delayShow ? this.props.delayShow : 0,
+        delayHide: e.currentTarget.getAttribute('data-delay-hide') ? e.currentTarget.getAttribute('data-delay-hide') : this.props.delayHide ? this.props.delayHide : 0,
+        border: e.currentTarget.getAttribute('data-border') ? e.currentTarget.getAttribute('data-border') === 'true' : this.props.border ? this.props.border : false,
+        extraClass: extraClass,
+        multiline: multiline
+      });
 
-  ReactTooltip.prototype.showTooltip = function showTooltip(e) {
-    var originTooltip = e.currentTarget.getAttribute('data-tip');
-    /* Detect multiline */
-    var regexp = /<br\s*\/?>/;
-    var multiline = e.currentTarget.getAttribute('data-multiline') ? e.currentTarget.getAttribute('data-multiline') : this.props.multiline ? this.props.multiline : false;
-    var tooltipText = undefined;
-    var multilineCount = 0;
-    if (!multiline || multiline === 'false' || !regexp.test(originTooltip)) {
-      tooltipText = originTooltip;
-    } else {
-      tooltipText = originTooltip.split(regexp).map(function (d, i) {
-        multilineCount += 1;
-        return _react2['default'].createElement(
-          'span',
-          { key: i, className: 'multi-line' },
-          d
-        );
-      });
+      this.addScrollListener();
+      this.updateTooltip(e);
     }
-    /* Define extra class */
-    var extraClass = e.currentTarget.getAttribute('data-class') ? e.currentTarget.getAttribute('data-class') : '';
-    extraClass = this.props['class'] ? this.props['class'] + ' ' + extraClass : extraClass;
-    this.setState({
-      placeholder: tooltipText,
-      multilineCount: multilineCount,
-      place: e.currentTarget.getAttribute('data-place') ? e.currentTarget.getAttribute('data-place') : this.props.place ? this.props.place : 'top',
-      type: e.currentTarget.getAttribute('data-type') ? e.currentTarget.getAttribute('data-type') : this.props.type ? this.props.type : 'dark',
-      effect: e.currentTarget.getAttribute('data-effect') ? e.currentTarget.getAttribute('data-effect') : this.props.effect ? this.props.effect : 'float',
-      offset: e.currentTarget.getAttribute('data-offset') ? e.currentTarget.getAttribute('data-offset') : this.props.offset ? this.props.offset : {},
-      html: e.currentTarget.getAttribute('data-html') ? e.currentTarget.getAttribute('data-html') : this.props.html ? this.props.html : false,
-      delayShow: e.currentTarget.getAttribute('data-delay-show') ? e.currentTarget.getAttribute('data-delay-show') : this.props.delayShow ? this.props.delayShow : 0,
-      delayHide: e.currentTarget.getAttribute('data-delay-hide') ? e.currentTarget.getAttribute('data-delay-hide') : this.props.delayHide ? this.props.delayHide : 0,
-      border: e.currentTarget.getAttribute('data-border') ? e.currentTarget.getAttribute('data-border') === 'true' : this.props.border ? this.props.border : false,
-      extraClass: extraClass,
-      multiline: multiline
-    });
 
-    this.addScrollListener();
-    this.updateTooltip(e);
-  };
+    /**
+     * When mouse hover, updatetooltip
+     */
 
-  /**
-   * When mouse hover, updatetooltip
-   */
+  }, {
+    key: 'updateTooltip',
+    value: function updateTooltip(e) {
+      var _this3 = this;
 
-  ReactTooltip.prototype.updateTooltip = function updateTooltip(e) {
-    var _this2 = this;
+      var _state = this.state;
+      var delayShow = _state.delayShow;
+      var show = _state.show;
 
-    var _state = this.state;
-    var delayShow = _state.delayShow;
-    var show = _state.show;
+      var delayTime = show ? 0 : parseInt(delayShow, 10);
+      var eventTarget = e.currentTarget;
 
-    var delayTime = show ? 0 : parseInt(delayShow, 10);
-    var eventTarget = e.currentTarget;
+      clearTimeout(this.delayShowLoop);
+      this.delayShowLoop = setTimeout(function () {
+        if (_this3.trim(_this3.state.placeholder).length > 0) {
+          if (_this3.state.effect === 'float') {
+            _this3.setState({
+              show: true,
+              x: e.clientX,
+              y: e.clientY
+            });
+          } else if (_this3.state.effect === 'solid') {
+            var _getPosition2 = _this3.getPosition(eventTarget);
 
-    clearTimeout(this.delayShowLoop);
-    this.delayShowLoop = setTimeout(function () {
-      if (_this2.trim(_this2.state.placeholder).length > 0) {
-        if (_this2.state.effect === 'float') {
-          _this2.setState({
-            show: true,
-            x: e.clientX,
-            y: e.clientY
-          });
-        } else if (_this2.state.effect === 'solid') {
-          var _getPosition2 = _this2.getPosition(eventTarget);
+            var x = _getPosition2.x;
+            var y = _getPosition2.y;
 
-          var x = _getPosition2.x;
-          var y = _getPosition2.y;
-
-          _this2.setState({
-            show: true,
-            x: x,
-            y: y
-          });
+            _this3.setState({
+              show: true,
+              x: x,
+              y: y
+            });
+          }
         }
-      }
-    }, delayTime);
-  };
+      }, delayTime);
+    }
 
-  /**
-   * When mouse leave, hide tooltip
-   */
+    /**
+     * When mouse leave, hide tooltip
+     */
 
-  ReactTooltip.prototype.hideTooltip = function hideTooltip() {
-    var _this3 = this;
+  }, {
+    key: 'hideTooltip',
+    value: function hideTooltip() {
+      var _this4 = this;
 
-    var delayHide = this.state.delayHide;
+      var delayHide = this.state.delayHide;
 
-    clearTimeout(this.delayShowLoop);
-    setTimeout(function () {
-      _this3.setState({
-        show: false
-      });
-      _this3.removeScrollListener();
-    }, parseInt(delayHide, 10));
-  };
+      clearTimeout(this.delayShowLoop);
+      setTimeout(function () {
+        _this4.setState({
+          show: false
+        });
+        _this4.removeScrollListener();
+      }, parseInt(delayHide, 10));
+    }
 
-  /**
-   * Add scroll eventlistener when tooltip show
-   * or tooltip will always existed
-   */
+    /**
+     * Add scroll eventlistener when tooltip show
+     * or tooltip will always existed
+     */
 
-  ReactTooltip.prototype.addScrollListener = function addScrollListener() {
-    window.addEventListener('scroll', this.hideTooltip);
-  };
+  }, {
+    key: 'addScrollListener',
+    value: function addScrollListener() {
+      window.addEventListener('scroll', this.hideTooltip);
+    }
+  }, {
+    key: 'removeScrollListener',
+    value: function removeScrollListener() {
+      window.removeEventListener('scroll', this.hideTooltip);
+    }
 
-  ReactTooltip.prototype.removeScrollListener = function removeScrollListener() {
-    window.removeEventListener('scroll', this.hideTooltip);
-  };
+    /**
+     * Get tooltip poisition by current target
+     */
 
-  /**
-   * Get tooltip poisition by current target
-   */
+  }, {
+    key: 'getPosition',
+    value: function getPosition(currentTarget) {
+      var place = this.state.place;
 
-  ReactTooltip.prototype.getPosition = function getPosition(currentTarget) {
-    var place = this.state.place;
+      var node = _reactDom2.default.findDOMNode(this);
+      var boundingClientRect = currentTarget.getBoundingClientRect();
+      var targetTop = boundingClientRect.top;
+      var targetLeft = boundingClientRect.left;
+      var tipWidth = node.clientWidth;
+      var tipHeight = node.clientHeight;
+      var targetWidth = currentTarget.clientWidth;
+      var targetHeight = currentTarget.clientHeight;
+      var x = undefined;
+      var y = undefined;
+      if (place === 'top') {
+        x = targetLeft - tipWidth / 2 + targetWidth / 2;
+        y = targetTop - tipHeight - 8;
+      } else if (place === 'bottom') {
+        x = targetLeft - tipWidth / 2 + targetWidth / 2;
+        y = targetTop + targetHeight + 8;
+      } else if (place === 'left') {
+        x = targetLeft - tipWidth - 6;
+        y = targetTop + targetHeight / 2 - tipHeight / 2;
+      } else if (place === 'right') {
+        x = targetLeft + targetWidth + 6;
+        y = targetTop + targetHeight / 2 - tipHeight / 2;
+      }
 
-    var node = _reactDom2['default'].findDOMNode(this);
-    var boundingClientRect = currentTarget.getBoundingClientRect();
-    var targetTop = boundingClientRect.top;
-    var targetLeft = boundingClientRect.left;
-    var tipWidth = node.clientWidth;
-    var tipHeight = node.clientHeight;
-    var targetWidth = currentTarget.clientWidth;
-    var targetHeight = currentTarget.clientHeight;
-    var x = undefined;
-    var y = undefined;
-    if (place === 'top') {
-      x = targetLeft - tipWidth / 2 + targetWidth / 2;
-      y = targetTop - tipHeight - 8;
-    } else if (place === 'bottom') {
-      x = targetLeft - tipWidth / 2 + targetWidth / 2;
-      y = targetTop + targetHeight + 8;
-    } else if (place === 'left') {
-      x = targetLeft - tipWidth - 6;
-      y = targetTop + targetHeight / 2 - tipHeight / 2;
-    } else if (place === 'right') {
-      x = targetLeft + targetWidth + 6;
-      y = targetTop + targetHeight / 2 - tipHeight / 2;
+      return { x: x, y: y };
     }
 
-    return { x: x, y: y };
-  };
+    /**
+     * Execute in componentDidUpdate, can't put this into render() to support server rendering
+     */
 
-  /**
-   * Execute in componentDidUpdate, can't put this into render() to support server rendering
-   */
+  }, {
+    key: 'updatePosition',
+    value: function updatePosition() {
+      var node = _reactDom2.default.findDOMNode(this);
 
-  ReactTooltip.prototype.updatePosition = function updatePosition() {
-    var node = _reactDom2['default'].findDOMNode(this);
+      var tipWidth = node.clientWidth;
+      var tipHeight = node.clientHeight;
+      var _state2 = this.state;
+      var effect = _state2.effect;
+      var place = _state2.place;
+      var offset = _state2.offset;
 
-    var tipWidth = node.clientWidth;
-    var tipHeight = node.clientHeight;
-    var _state2 = this.state;
-    var effect = _state2.effect;
-    var place = _state2.place;
-    var offset = _state2.offset;
+      var offsetFromEffect = {};
 
-    var offsetFromEffect = {};
+      /**
+       * List all situations for different placement,
+       * then tooltip can judge switch to which side if window space is not enough
+       * @note only support for float at the moment
+       */
+      var placements = ['top', 'bottom', 'left', 'right'];
+      placements.forEach(function (key) {
+        offsetFromEffect[key] = { x: 0, y: 0 };
+      });
 
-    /**
-     * List all situations for different placement,
-     * then tooltip can judge switch to which side if window space is not enough
-     * @note only support for float at the moment
-     */
-    var placements = ['top', 'bottom', 'left', 'right'];
-    placements.forEach(function (key) {
-      offsetFromEffect[key] = { x: 0, y: 0 };
-    });
+      if (effect === 'float') {
+        offsetFromEffect.top = {
+          x: -(tipWidth / 2),
+          y: -tipHeight
+        };
+        offsetFromEffect.bottom = {
+          x: -(tipWidth / 2),
+          y: 15
+        };
+        offsetFromEffect.left = {
+          x: -(tipWidth + 15),
+          y: -(tipHeight / 2)
+        };
+        offsetFromEffect.right = {
+          x: 10,
+          y: -(tipHeight / 2)
+        };
+      }
 
-    if (effect === 'float') {
-      offsetFromEffect.top = {
-        x: -(tipWidth / 2),
-        y: -tipHeight
+      var xPosition = 0;
+      var yPosition = 0;
+
+      /* If user set offset attribute, we have to consider it into out position calculating */
+      if (Object.prototype.toString.apply(offset) === '[object String]') {
+        offset = JSON.parse(offset.toString().replace(/\'/g, '\"'));
+      }
+      for (var key in offset) {
+        if (key === 'top') {
+          yPosition -= parseInt(offset[key], 10);
+        } else if (key === 'bottom') {
+          yPosition += parseInt(offset[key], 10);
+        } else if (key === 'left') {
+          xPosition -= parseInt(offset[key], 10);
+        } else if (key === 'right') {
+          xPosition += parseInt(offset[key], 10);
+        }
+      }
+
+      /* If our tooltip goes outside the window we want to try and change its place to be inside the window */
+      var x = this.state.x;
+      var y = this.state.y;
+      var windoWidth = window.innerWidth;
+      var windowHeight = window.innerHeight;
+
+      var getStyleLeft = function getStyleLeft(place) {
+        var offsetEffectX = effect === 'solid' ? 0 : place ? offsetFromEffect[place].x : 0;
+        return x + offsetEffectX + xPosition;
       };
-      offsetFromEffect.bottom = {
-        x: -(tipWidth / 2),
-        y: 15
+      var getStyleTop = function getStyleTop(place) {
+        var offsetEffectY = effect === 'solid' ? 0 : place ? offsetFromEffect[place].y : 0;
+        return y + offsetEffectY + yPosition;
       };
-      offsetFromEffect.left = {
-        x: -(tipWidth + 15),
-        y: -(tipHeight / 2)
+
+      var outsideLeft = function outsideLeft(place) {
+        var styleLeft = getStyleLeft(place);
+        return styleLeft < 0 && x + offsetFromEffect['right'].x + xPosition <= windoWidth;
       };
-      offsetFromEffect.right = {
-        x: 10,
-        y: -(tipHeight / 2)
+      var outsideRight = function outsideRight(place) {
+        var styleLeft = getStyleLeft(place);
+        return styleLeft + tipWidth > windoWidth && x + offsetFromEffect['left'].x + xPosition >= 0;
       };
-    }
+      var outsideTop = function outsideTop(place) {
+        var styleTop = getStyleTop(place);
+        return styleTop < 0 && y + offsetFromEffect['bottom'].y + yPosition + tipHeight < windowHeight;
+      };
+      var outsideBottom = function outsideBottom(place) {
+        var styleTop = getStyleTop(place);
+        return styleTop + tipHeight >= windowHeight && y + offsetFromEffect['top'].y + yPosition >= 0;
+      };
 
-    var xPosition = 0;
-    var yPosition = 0;
+      /* We want to make sure the place we switch to will not go outside either */
+      var outside = function outside(place) {
+        return outsideTop(place) || outsideRight(place) || outsideBottom(place) || outsideLeft(place);
+      };
 
-    /* If user set offset attribute, we have to consider it into out position calculating */
-    if (Object.prototype.toString.apply(offset) === '[object String]') {
-      offset = JSON.parse(offset.toString().replace(/\'/g, '\"'));
-    }
-    for (var key in offset) {
-      if (key === 'top') {
-        yPosition -= parseInt(offset[key], 10);
-      } else if (key === 'bottom') {
-        yPosition += parseInt(offset[key], 10);
-      } else if (key === 'left') {
-        xPosition -= parseInt(offset[key], 10);
-      } else if (key === 'right') {
-        xPosition += parseInt(offset[key], 10);
+      /* We check each side and switch if the new place will be in bounds */
+      if (outsideLeft(place)) {
+        if (!outside('right')) {
+          this.setState({
+            place: 'right'
+          });
+          return;
+        }
+      } else if (outsideRight(place)) {
+        if (!outside('left')) {
+          this.setState({
+            place: 'left'
+          });
+          return;
+        }
+      } else if (outsideTop(place)) {
+        if (!outside('bottom')) {
+          this.setState({
+            place: 'bottom'
+          });
+          return;
+        }
+      } else if (outsideBottom(place)) {
+        if (!outside('top')) {
+          this.setState({
+            place: 'top'
+          });
+          return;
+        }
       }
+
+      node.style.left = getStyleLeft(place) + 'px';
+      node.style.top = getStyleTop(place) + 'px';
     }
 
-    /* If our tooltip goes outside the window we want to try and change its place to be inside the window */
-    var x = this.state.x;
-    var y = this.state.y;
-    var windoWidth = window.innerWidth;
-    var windowHeight = window.innerHeight;
+    /**
+     * Set style tag in header
+     * Insert style by this way
+     */
 
-    var getStyleLeft = function getStyleLeft(place) {
-      var offsetEffectX = effect === 'solid' ? 0 : place ? offsetFromEffect[place].x : 0;
-      return x + offsetEffectX + xPosition;
-    };
-    var getStyleTop = function getStyleTop(place) {
-      var offsetEffectY = effect === 'solid' ? 0 : place ? offsetFromEffect[place].y : 0;
-      return y + offsetEffectY + yPosition;
-    };
-
-    var outsideLeft = function outsideLeft(place) {
-      var styleLeft = getStyleLeft(place);
-      return styleLeft < 0 && x + offsetFromEffect['right'].x + xPosition <= windoWidth;
-    };
-    var outsideRight = function outsideRight(place) {
-      var styleLeft = getStyleLeft(place);
-      return styleLeft + tipWidth > windoWidth && x + offsetFromEffect['left'].x + xPosition >= 0;
-    };
-    var outsideTop = function outsideTop(place) {
-      var styleTop = getStyleTop(place);
-      return styleTop < 0 && y + offsetFromEffect['bottom'].y + yPosition + tipHeight < windowHeight;
-    };
-    var outsideBottom = function outsideBottom(place) {
-      var styleTop = getStyleTop(place);
-      return styleTop + tipHeight >= windowHeight && y + offsetFromEffect['top'].y + yPosition >= 0;
-    };
-
-    /* We want to make sure the place we switch to will not go outside either */
-    var outside = function outside(place) {
-      return outsideTop(place) || outsideRight(place) || outsideBottom(place) || outsideLeft(place);
-    };
-
-    /* We check each side and switch if the new place will be in bounds */
-    if (outsideLeft(place)) {
-      if (!outside('right')) {
-        this.setState({
-          place: 'right'
-        });
-        return;
+  }, {
+    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);
       }
-    } else if (outsideRight(place)) {
-      if (!outside('left')) {
-        this.setState({
-          place: 'left'
-        });
-        return;
-      }
-    } else if (outsideTop(place)) {
-      if (!outside('bottom')) {
-        this.setState({
-          place: 'bottom'
-        });
-        return;
-      }
-    } else if (outsideBottom(place)) {
-      if (!outside('top')) {
-        this.setState({
-          place: 'top'
-        });
-        return;
-      }
     }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _state3 = this.state;
+      var placeholder = _state3.placeholder;
+      var extraClass = _state3.extraClass;
+      var html = _state3.html;
 
-    node.style.left = getStyleLeft(place) + 'px';
-    node.style.top = getStyleTop(place) + 'px';
-  };
+      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' });
 
-  /**
-   * Set style tag in header
-   * Insert style by this way
-   */
-
-  ReactTooltip.prototype.setStyleHeader = 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);
-    }
-  };
-
-  ReactTooltip.prototype.render = function render() {
-    var _state3 = this.state;
-    var placeholder = _state3.placeholder;
-    var extraClass = _state3.extraClass;
-    var html = _state3.html;
-
-    var tooltipClass = _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 {
-      var content = this.props.children ? this.props.children : placeholder;
-      return _react2['default'].createElement(
-        'div',
-        { className: tooltipClass + ' ' + extraClass, 'data-id': 'tooltip' },
-        content
-      );
-    }
-  };
-
-  ReactTooltip.prototype.trim = function trim(string) {
-    if (Object.prototype.toString.call(string) !== '[object String]') {
-      return string;
-    }
-    var newString = string.split('');
-    var firstCount = 0;
-    var lastCount = 0;
-    for (var i = 0; i < string.length; i++) {
-      if (string[i] !== ' ') {
-        break;
+      if (html) {
+        return _react2.default.createElement('div', { className: tooltipClass + ' ' + extraClass, 'data-id': 'tooltip', dangerouslySetInnerHTML: { __html: placeholder } });
+      } else {
+        var content = this.props.children ? this.props.children : placeholder;
+        return _react2.default.createElement(
+          'div',
+          { className: tooltipClass + ' ' + extraClass, 'data-id': 'tooltip' },
+          content
+        );
       }
-      firstCount++;
     }
-    for (var i = string.length - 1; i >= 0; i--) {
-      if (string[i] !== ' ') {
-        break;
+  }, {
+    key: 'trim',
+    value: function trim(string) {
+      if (Object.prototype.toString.call(string) !== '[object String]') {
+        return string;
       }
-      lastCount++;
+      var newString = string.split('');
+      var firstCount = 0;
+      var lastCount = 0;
+      for (var i = 0; i < string.length; i++) {
+        if (string[i] !== ' ') {
+          break;
+        }
+        firstCount++;
+      }
+      for (var i = string.length - 1; i >= 0; i--) {
+        if (string[i] !== ' ') {
+          break;
+        }
+        lastCount++;
+      }
+      newString.splice(0, firstCount);
+      newString.splice(-lastCount, lastCount);
+      return newString.join('');
     }
-    newString.splice(0, firstCount);
-    newString.splice(-lastCount, lastCount);
-    return newString.join('');
-  };
-
+  }]);
   return ReactTooltip;
-})(_react.Component);
+}(_react2.default.Component);
 
-exports['default'] = ReactTooltip;
+exports.default = ReactTooltip;
 
+
 ReactTooltip.propTypes = {
@@ -646,3 +691,3 @@ children: _react.PropTypes.any,
   border: _react.PropTypes.bool,
-  'class': _react.PropTypes.string,
+  class: _react.PropTypes.string,
   id: _react.PropTypes.string,
@@ -655,2 +700,1 @@ html: _react.PropTypes.bool,
 };
-module.exports = exports['default'];

dist/style.js

 'use strict';
 
-exports.__esModule = 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:6px solid #222}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom:6px solid #222}.__react_component_tooltip.type-dark.place-left:after{border-left:6px solid #222}.__react_component_tooltip.type-dark.place-right:after{border-right:6px solid #222}.__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:6px solid #8DC572}.__react_component_tooltip.type-success.place-bottom:after{border-bottom:6px solid #8DC572}.__react_component_tooltip.type-success.place-left:after{border-left:6px solid #8DC572}.__react_component_tooltip.type-success.place-right:after{border-right:6px solid #8DC572}.__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:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-left:after{border-left:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-right:after{border-right:6px solid #F0AD4E}.__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:6px solid #BE6464}.__react_component_tooltip.type-error.place-bottom:after{border-bottom:6px solid #BE6464}.__react_component_tooltip.type-error.place-left:after{border-left:6px solid #BE6464}.__react_component_tooltip.type-error.place-right:after{border-right:6px solid #BE6464}.__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:6px solid #337AB7}.__react_component_tooltip.type-info.place-bottom:after{border-bottom:6px solid #337AB7}.__react_component_tooltip.type-info.place-left:after{border-left:6px solid #337AB7}.__react_component_tooltip.type-info.place-right:after{border-right:6px solid #337AB7}.__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:6px solid #fff}.__react_component_tooltip.type-light.place-bottom:after{border-bottom:6px solid #fff}.__react_component_tooltip.type-light.place-left:after{border-left:6px solid #fff}.__react_component_tooltip.type-light.place-right:after{border-right:6px solid #fff}.__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}';
-module.exports = exports['default'];
+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:6px solid #222}.__react_component_tooltip.type-dark.place-bottom:after{border-bottom:6px solid #222}.__react_component_tooltip.type-dark.place-left:after{border-left:6px solid #222}.__react_component_tooltip.type-dark.place-right:after{border-right:6px solid #222}.__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:6px solid #8DC572}.__react_component_tooltip.type-success.place-bottom:after{border-bottom:6px solid #8DC572}.__react_component_tooltip.type-success.place-left:after{border-left:6px solid #8DC572}.__react_component_tooltip.type-success.place-right:after{border-right:6px solid #8DC572}.__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:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-bottom:after{border-bottom:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-left:after{border-left:6px solid #F0AD4E}.__react_component_tooltip.type-warning.place-right:after{border-right:6px solid #F0AD4E}.__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:6px solid #BE6464}.__react_component_tooltip.type-error.place-bottom:after{border-bottom:6px solid #BE6464}.__react_component_tooltip.type-error.place-left:after{border-left:6px solid #BE6464}.__react_component_tooltip.type-error.place-right:after{border-right:6px solid #BE6464}.__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:6px solid #337AB7}.__react_component_tooltip.type-info.place-bottom:after{border-bottom:6px solid #337AB7}.__react_component_tooltip.type-info.place-left:after{border-left:6px solid #337AB7}.__react_component_tooltip.type-info.place-right:after{border-right:6px solid #337AB7}.__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:6px solid #fff}.__react_component_tooltip.type-light.place-bottom:after{border-bottom:6px solid #fff}.__react_component_tooltip.type-light.place-left:after{border-left:6px solid #fff}.__react_component_tooltip.type-light.place-right:after{border-right:6px solid #fff}.__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}';

package.json

 {
   "name": "react-tooltip",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "react tooltip component",
-  "main": "dist/react-tooltip.js",
+  "main": "index.js",
   "scripts": {
     "check": "standard --verbose | snazzy src/index.js",
     "test": "npm run check",
-    "devjs": "node bin/transferSass.js & watchify -t babelify -o ./example/dist/index.js ./example/src/index.js -dv",
+    "devjs": "node bin/transferSass.js & watchify ./example/src/index.js -o ./example/dist/index.js -dv",
     "devcss": "node-sass example/src/index.scss example/dist/index.css & node-sass -w example/src/index.scss example/dist/index.css",
     "predev": "rm -rf example/dist",
     "dev": "mkdir -p ./example/dist & npm run devjs & npm run devcss & http-server example -p 8888 -s -o",
-    "deployjs": "babel src/index.js --out-file dist/react-tooltip.js && babel src/style.js --out-file dist/style.js",
+    "deployjs": "babel src/index.js -o dist/react-tooltip.js && babel src/style.js -o dist/style.js",
     "predeploycss": "cp src/index.scss dist/react-tooltip.scss",
     "deploycss": "node-sass --output-style compressed src/index.scss dist/react-tooltip.min.css",
     "predeploy": "rm -rf dist",
-    "deploy": "mkdir dist & npm run deployjs & npm run deploycss"
+    "deploy": "mkdir dist & npm run deployjs & npm run deploycss",
+    "postdeploy": "browserify -t babelify -t browserify-shim src/index.js -o dist/react-tooltip.stand.js"
   },
@@ -43,13 +44,26 @@ "standard": {
   "homepage": "https://github.com/wwayne/react-tooltip",
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
+  "browserify-shim": {
+    "react": "global:React",
+    "react-dom": "global:ReactDOM"
+  },
   "peerDependencies": {
-    "react": ">=0.14.0"
+    "react": ">=0.14.0",
+    "react-dom": "0.14.*"
   },
   "dependencies": {
-    "classnames": "^1.2.0",
-    "react-dom": "0.14.*"
+    "classnames": "^1.2.0" 
   },
   "devDependencies": {
-    "babel": "^5.3.1",
+    "babel-cli": "^6.5.1",
     "babel-eslint": "^4.1.1",
-    "babelify": "^6.0.2",
+    "babel-plugin-transform-runtime": "^6.5.0",
+    "babel-preset-es2015": "^6.5.0",
+    "babel-preset-react": "^6.5.0",
+    "browserify": "^13.0.0",
+    "browserify-shim": "^3.8.12",
     "http-server": "^0.8.0",
@@ -56,0 +70,0 @@ "node-sass": "^3.3.2",

src/index.js

@@ -8,6 +8,3 @@ 'use strict'
 
-export default class ReactTooltip extends Component {
-
-  static displayName = 'ReactTooltip'
-
+export default class ReactTooltip extends React.Component {
   /**
@@ -41,5 +38,2 @@ * Class method
 
-  static eventHideMark = `hide${Date.now()}`
-  static eventRebuildMark = `rebuild${Date.now()}`
-
   globalHide () {
@@ -46,0 +40,0 @@ if (this.mount) {

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

136687

increased by72.41%

Number of package files

15

increased by25%

Lines of code

2479

increased by118.03%

Worsened metrics

Dev dependency count

13

increased by44.44%

Number of low supply chain risk alerts

3

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedreact-dom@0.14.*