@cloudflare/component-tooltip 4.7.4 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # 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
+
+- ecfb4b3712: Delays tooltip by default, adds option to show immediately
+
 ## 4.7.4
 
 ### Patch Changes

package/es/Tooltip.js

@@ -6,6 +6,7 @@ import { Button } from '@cloudflare/elements';
 import { createComponent } from '@cloudflare/style-container';
 import ReactTooltip from 'react-tooltip';
 import uniqueId from 'lodash.uniqueid';
+var DELAY_SHOW_MILLIS = 400;
 
 var getBackgroundColor = (theme, type) => {
   if (type === 'dark') {
@@ -104,6 +105,7 @@ class Tooltip extends React.PureComponent {
       children,
       className,
       delayHide,
+      delayShow,
       afterHide,
       afterShow,
       getContent,
@@ -117,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,
@@ -157,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
@@ -178,6 +192,7 @@ Tooltip.propTypes = {
   children: PropTypes.node,
   disable: PropTypes.bool,
   delayHide: PropTypes.number,
+  delayShow: PropTypes.bool,
   afterHide: PropTypes.func,
   afterShow: PropTypes.func,
   buttonProps: PropTypes.object,
@@ -197,7 +212,8 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false
+  forceRebuild: false,
+  delayShow: true
 };
 Tooltip.displayName = 'Tooltip';
 export default createComponent(tooltipStyles, Tooltip);

package/index.d.ts

@@ -11,6 +11,7 @@ interface TooltipProps extends React.CSSProperties, TfelaMProps {
   className?: string;
   disable?: boolean;
   delayHide?: number;
+  delayShow?: boolean;
   afterHide?: (...args: any[]) => void;
   afterShow?: (...args: any[]) => void;
   getContent?: (...args: any[]) => void;

package/lib/Tooltip.js

@@ -43,6 +43,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+var DELAY_SHOW_MILLIS = 400;
+
 var getBackgroundColor = function getBackgroundColor(theme, type) {
   if (type === 'dark') {
     return "".concat(theme.colors.gray[2], " !important");
@@ -162,6 +164,7 @@ var Tooltip = /*#__PURE__*/function (_React$PureComponent) {
           children = _this$props.children,
           className = _this$props.className,
           delayHide = _this$props.delayHide,
+          delayShow = _this$props.delayShow,
           afterHide = _this$props.afterHide,
           afterShow = _this$props.afterShow,
           getContent = _this$props.getContent,
@@ -175,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,
@@ -222,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,
@@ -248,6 +260,7 @@ Tooltip.propTypes = {
   children: _propTypes.default.node,
   disable: _propTypes.default.bool,
   delayHide: _propTypes.default.number,
+  delayShow: _propTypes.default.bool,
   afterHide: _propTypes.default.func,
   afterShow: _propTypes.default.func,
   buttonProps: _propTypes.default.object,
@@ -267,7 +280,8 @@ Tooltip.defaultProps = {
   type: 'dark',
   anchored: true,
   isCapture: true,
-  forceRebuild: false
+  forceRebuild: false,
+  delayShow: true
 };
 Tooltip.displayName = 'Tooltip';
 

package/package.json

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