3.1.8

Author: wwayne

CHANGELOG.md

@@ -1,5 +1,10 @@
 ## Change Log
 
+### 3.1.8 (2016/09/14 13:37 +00:00)
+- [#194](https://github.com/wwayne/react-tooltip/pull/194) Add resizeHide option (@wwayne)
+- [#193](https://github.com/wwayne/react-tooltip/pull/193) hide specific tooltip (@wwayne)
+- [#192](https://github.com/wwayne/react-tooltip/pull/192) Create scroll hide option (@wwayne)
+
 ### 3.1.7 (2016/09/07 00:46 +00:00)
 - [#187](https://github.com/wwayne/react-tooltip/pull/187) Add disable option (@wwayne)
 - [#183](https://github.com/wwayne/react-tooltip/pull/183) Remove react-dom from Bower dependencies (@mikkopiu)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tooltip",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "react tooltip component",
   "main": "dist/index.js",
   "scripts": {

standalone/react-tooltip.js

@@ -179,8 +179,8 @@ exports.default = function (target) {
    * Hide all tooltip
    * @trigger ReactTooltip.hide()
    */
-  target.hide = function () {
-    dispatchGlobalEvent(_constant2.default.GLOBAL.HIDE);
+  target.hide = function (target) {
+    dispatchGlobalEvent(_constant2.default.GLOBAL.HIDE, { target: target });
   };
 
   /**
@@ -214,6 +214,13 @@ exports.default = function (target) {
       this.showTooltip(e, true);
     }
   };
+
+  target.prototype.globalHide = function (event) {
+    if (this.mount) {
+      var hasTarget = event && event.detail && event.detail.target && true || false;
+      this.hideTooltip({ currentTarget: hasTarget && event.detail.target }, hasTarget);
+    }
+  };
 };
 
 var _constant = require('../constant');
@@ -247,10 +254,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 
 exports.default = function (target) {
-  target.prototype.bindWindowEvents = function () {
+  target.prototype.bindWindowEvents = function (resizeHide) {
     // ReactTooltip.hide
-    window.removeEventListener(_constant2.default.GLOBAL.HIDE, this.hideTooltip);
-    window.addEventListener(_constant2.default.GLOBAL.HIDE, this.hideTooltip, false);
+    window.removeEventListener(_constant2.default.GLOBAL.HIDE, this.globalHide);
+    window.addEventListener(_constant2.default.GLOBAL.HIDE, this.globalHide, false);
 
     // ReactTooltip.rebuild
     window.removeEventListener(_constant2.default.GLOBAL.REBUILD, this.globalRebuild);
@@ -261,12 +268,14 @@ exports.default = function (target) {
     window.addEventListener(_constant2.default.GLOBAL.SHOW, this.globalShow, false);
 
     // Resize
-    window.removeEventListener('resize', this.onWindowResize);
-    window.addEventListener('resize', this.onWindowResize, false);
+    if (resizeHide) {
+      window.removeEventListener('resize', this.onWindowResize);
+      window.addEventListener('resize', this.onWindowResize, false);
+    }
   };
 
   target.prototype.unbindWindowEvents = function () {
-    window.removeEventListener(_constant2.default.GLOBAL.HIDE, this.hideTooltip);
+    window.removeEventListener(_constant2.default.GLOBAL.HIDE, this.globalHide);
     window.removeEventListener(_constant2.default.GLOBAL.REBUILD, this.globalRebuild);
     window.removeEventListener(_constant2.default.GLOBAL.SHOW, this.globalShow);
     window.removeEventListener('resize', this.onWindowResize);
@@ -383,7 +392,7 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
       ariaProps: (0, _aria.parseAria)(props) // aria- and role attributes
     };
 
-    _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'globalRebuild', 'globalShow', 'onWindowResize']);
+    _this.bind(['showTooltip', 'updateTooltip', 'hideTooltip', 'globalRebuild', 'globalShow', 'globalHide', 'onWindowResize']);
 
     _this.mount = true;
     _this.delayShowLoop = null;
@@ -411,7 +420,7 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
     value: function componentDidMount() {
       this.setStyleHeader(); // Set the style to the <link>
       this.bindListener(); // Bind listener for tooltip
-      this.bindWindowEvents(); // Bind global event for static method
+      this.bindWindowEvents(this.props.resizeHide); // Bind global event for static method
     }
   }, {
     key: 'componentWillReceiveProps',
@@ -584,6 +593,15 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
 
       // If it is focus event or called by ReactTooltip.show, switch to `solid` effect
       var switchToSolid = e instanceof window.FocusEvent || isGlobalCall;
+
+      // if it need to skip adding hide listener to scroll
+      var scrollHide = true;
+      if (e.currentTarget.getAttribute('data-scroll-hide')) {
+        scrollHide = e.currentTarget.getAttribute('data-scroll-hide') === 'true';
+      } else if (this.props.scrollHide != null) {
+        scrollHide = this.props.scrollHide;
+      }
+
       this.setState({
         placeholder: placeholder,
         place: e.currentTarget.getAttribute('data-place') || this.props.place || 'top',
@@ -597,7 +615,7 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
         extraClass: e.currentTarget.getAttribute('data-class') || this.props.class || '',
         countTransform: e.currentTarget.getAttribute('data-count-transform') ? e.currentTarget.getAttribute('data-count-transform') === 'true' : this.props.countTransform != null ? this.props.countTransform : true
       }, function () {
-        _this5.addScrollListener(e);
+        if (scrollHide) _this5.addScrollListener(e);
         _this5.updateTooltip(e);
 
         if (getContent && Array.isArray(getContent)) {
@@ -664,15 +682,21 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
 
   }, {
     key: 'hideTooltip',
-    value: function hideTooltip() {
+    value: function hideTooltip(e, hasTarget) {
       var _this7 = this;
 
+      if (!this.mount) return;
+      if (hasTarget) {
+        // Don't trigger other elements belongs to other ReactTooltip
+        var targetArray = this.getTargetArray(this.props.id);
+        var isMyElement = targetArray.some(function (ele) {
+          return ele === e.currentTarget;
+        });
+        if (!isMyElement || !this.state.show) return;
+      }
       var delayHide = this.state.delayHide;
       var afterHide = this.props.afterHide;
 
-
-      if (!this.mount) return;
-
       var resetState = function resetState() {
         var isVisible = _this7.state.show;
         _this7.setState({
@@ -816,7 +840,11 @@ var ReactTooltip = (0, _staticMethods2.default)(_class = (0, _windowListener2.de
   countTransform: _react.PropTypes.bool,
   afterShow: _react.PropTypes.func,
   afterHide: _react.PropTypes.func,
-  disable: _react.PropTypes.bool
+  disable: _react.PropTypes.bool,
+  scrollHide: _react.PropTypes.bool,
+  resizeHide: _react.PropTypes.bool
+}, _class2.defaultProps = {
+  resizeHide: true
 }, _temp)) || _class) || _class) || _class) || _class;
 
 /* export default not fit for standalone, it will exports {default:...} */