@cloudflare/component-tooltip 5.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.1.0
+
+### Minor Changes
+
+- 0a4b7280c9: Fix bug where multiple tooltips on one page with delay do not dismiss correctly
+
 ## 5.0.0
 
 ### Major Changes

package/es/Tooltip.js

@@ -119,6 +119,7 @@ class Tooltip extends React.PureComponent {
       componentRef
     } = this.props;
     var id = this.props.id ? this.props.id : this.id;
+    var timer;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ReactTooltip, {
       id: id,
       disable: disable,
@@ -128,7 +129,6 @@ class Tooltip extends React.PureComponent {
       className: className,
       isCapture: isCapture,
       delayHide: delayHide ? delayHide : null,
-      delayShow: delayShow ? DELAY_SHOW_MILLIS : null,
       afterShow: afterShow,
       afterHide: afterHide,
       getContent: [() => message || getContent()],
@@ -160,8 +160,19 @@ class Tooltip extends React.PureComponent {
       onClick: e => {
         e.stopPropagation();
       },
-      onMouseOver: () => ReactTooltip.show(this.tooltipElement),
-      onMouseOut: () => ReactTooltip.hide(this.tooltipElement),
+      onMouseOver: () => {
+        if (delayShow) {
+          timer = setTimeout(() => {
+            ReactTooltip.show(this.tooltipElement);
+          }, DELAY_SHOW_MILLIS);
+        } else {
+          ReactTooltip.show(this.tooltipElement);
+        }
+      },
+      onMouseOut: () => {
+        clearTimeout(timer);
+        ReactTooltip.hide(this.tooltipElement);
+      },
       "aria-controls": id,
       "aria-label": ariaLabel,
       "aria-describedby": id

package/lib/Tooltip.js

@@ -178,6 +178,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           Component = _this$props$Component === void 0 ? _elements.Button : _this$props$Component,
           componentRef = _this$props.componentRef;
       var id = this.props.id ? this.props.id : this.id;
+      var timer;
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactTooltip.default, {
         id: id,
         disable: disable,
@@ -187,7 +188,6 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
         className: className,
         isCapture: isCapture,
         delayHide: delayHide ? delayHide : null,
-        delayShow: delayShow ? DELAY_SHOW_MILLIS : null,
         afterShow: afterShow,
         afterHide: afterHide,
         getContent: [function () {
@@ -226,10 +226,18 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           e.stopPropagation();
         },
         onMouseOver: function onMouseOver() {
-          return _reactTooltip.default.show(_this3.tooltipElement);
+          if (delayShow) {
+            timer = setTimeout(function () {
+              _reactTooltip.default.show(_this3.tooltipElement);
+            }, DELAY_SHOW_MILLIS);
+          } else {
+            _reactTooltip.default.show(_this3.tooltipElement);
+          }
         },
         onMouseOut: function onMouseOut() {
-          return _reactTooltip.default.hide(_this3.tooltipElement);
+          clearTimeout(timer);
+
+          _reactTooltip.default.hide(_this3.tooltipElement);
         },
         "aria-controls": id,
         "aria-label": ariaLabel,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudflare/component-tooltip",
   "description": "Cloudflare Tooltip Component",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "main": "lib/index.js",
   "module": "es/index.js",
   "author": "James Kyle <jkyle@cloudflare.com>",