Upgrade react-tooltip to v5.29.1

package.json

@@ -45,7 +45,7 @@
     "react-dates": "^21.8.0",
     "react-dom": "^16.14.0",
     "react-router-dom": "^5.3.0",
-    "react-tooltip": "^4.5.1",
+    "react-tooltip": "^5.29.1",
     "style-loader": "^4.0.0",
     "webpack": "^5.99.9",
     "webpack-bundle-analyzer": "^4.10.2",

src/components/annotation-form.jsx

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import StandardTooltip from './standard-tooltip';
+import StandardTooltip from './standard-tooltip/standard-tooltip';
 
 /**
  * @typedef {Object} AnnotationFormProps
@@ -83,7 +83,7 @@ export default class AnnotationForm extends Component {
 
         <StandardTooltip
           id="annotation-tooltip"
-          disable={!this.props.collapsed}
+          hidden={!this.props.collapsed}
         />
       </form>
     );
@@ -123,8 +123,8 @@ function Checkbox ({ children, formValues, name, onChange, collapsed }) {
       />
       <label
         className="toggle-btn"
-        data-for="annotation-tooltip"
-        data-tip={children}
+        data-tooltip-id="annotation-tooltip"
+        data-tooltip-content={children}
         data-fieldNumber={fieldNumber}
         htmlFor={uuid}
       >

src/components/page-details/page-details.jsx

@@ -6,7 +6,7 @@ import Loading from '../loading';
 import ExternalLink from '../external-link';
 import PageUrlDetails from '../page-url-details/page-url-details';
 import PageTag from '../page-tag/page-tag';
-import StandardTooltip from '../standard-tooltip';
+import StandardTooltip from '../standard-tooltip/standard-tooltip';
 import { describeHttpStatus } from '../../scripts/http-info';
 import { removeNonUserTags } from '../../scripts/tools';
 
@@ -141,8 +141,8 @@ export default class PageDetails extends Component {
               <span
                 styleName={`pageStyles.info-item pageStyles.${statusError ? 'status-error' : 'status-ok'}`}
                 data-http-status={statusCode}
-                data-for="page-tooltip"
-                data-tip={describeHttpStatus(statusCode)}
+                data-tooltip-id="page-tooltip"
+                data-tooltip-content={describeHttpStatus(statusCode)}
               >
                 {statusError ? '✘' : '•'} HTTP Status: {statusCode}
               </span>

src/components/page-list/page-list.jsx

@@ -1,7 +1,7 @@
 import Loading from '../loading';
 import { Component } from 'react';
 import SearchBar from '../search-bar/search-bar';
-import StandardTooltip from '../standard-tooltip';
+import StandardTooltip from '../standard-tooltip/standard-tooltip';
 import PageTag from '../page-tag/page-tag';
 import {
   getHttpStatusCategory,
@@ -56,7 +56,7 @@ export default class PageList extends Component {
   renderPages () {
     return (
       <div styleName="listStyles.container">
-        <StandardTooltip id="list-tooltip" />
+        <StandardTooltip id="list-tooltip" delayHide={20_000} />
         <table styleName="listStyles.table listStyles.page-list">
           <thead>{this.renderHeader()}</thead>
           <tbody>
@@ -94,8 +94,8 @@ export default class PageList extends Component {
         <td>{tags.map(tag => <PageTag tag={tag} key={tag.name} />)}</td>
         <td
           data-status-category={statusCategory}
-          data-for="list-tooltip"
-          data-tip={describeHttpStatus(statusCode)}
+          data-tooltip-id="list-tooltip"
+          data-tooltip-content={describeHttpStatus(statusCode)}
         >
           {statusCode >= 400 ? '✘' : '•'} {record.status}
         </td>

src/components/standard-tooltip/standard-tooltip.css

@@ -0,0 +1,3 @@
+.standard-tooltip {
+  z-index: 10;
+}

src/components/standard-tooltip/standard-tooltip.jsx

@@ -0,0 +1,10 @@
+import { Tooltip } from 'react-tooltip';
+import styles from './standard-tooltip.css'; // eslint-disable-line
+
+export default function StandardTooltip (props) {
+  return <Tooltip
+    place="top"
+    styleName="styles.standard-tooltip"
+    {...props}
+  />;
+}