update react-router-dom,react-tooltip& react-transition-group

1 files changed, 17 insertions, 5 deletions

diff --git a/src/features/webControls/components/WebControls.tsx b/src/features/webControls/components/WebControls.tsx
index e76fca6a2..54f45c843 100644
--- a/src/features/webControls/components/WebControls.tsx
+++ b/src/features/webControls/components/WebControls.tsx
@@ -9,6 +9,7 @@ import {
   mdiHomeOutline,
   mdiEarth,
 } from '@mdi/js';
+import { Tooltip as ReactTooltip } from 'react-tooltip';
 import Icon from '../../../components/ui/icon';
 
 const messages = defineMessages({
@@ -151,7 +152,8 @@ class WebControls extends Component<IProps, IState> {
           onClick={goHome}
           type="button"
           className={classes.button}
-          data-tip={intl.formatMessage(messages.goHome)}
+          data-tooltip-id="tooltip-web-controls"
+          data-tooltip-content={intl.formatMessage(messages.goHome)}
           data-place="bottom"
         >
           <Icon icon={mdiHomeOutline} className={classes.icon} />
@@ -161,7 +163,8 @@ class WebControls extends Component<IProps, IState> {
           type="button"
           className={classes.button}
           disabled={!canGoBack}
-          data-tip={intl.formatMessage(messages.back)}
+          data-tooltip-id="tooltip-web-controls"
+          data-tooltip-content={intl.formatMessage(messages.back)}
           data-place="bottom"
         >
           <Icon icon={mdiArrowLeft} className={classes.icon} />
@@ -171,7 +174,8 @@ class WebControls extends Component<IProps, IState> {
           type="button"
           className={classes.button}
           disabled={!canGoForward}
-          data-tip={intl.formatMessage(messages.forward)}
+          data-tooltip-id="tooltip-web-controls"
+          data-tooltip-content={intl.formatMessage(messages.forward)}
           data-place="bottom"
         >
           <Icon icon={mdiArrowRight} className={classes.icon} />
@@ -180,7 +184,8 @@ class WebControls extends Component<IProps, IState> {
           onClick={reload}
           type="button"
           className={classes.button}
-          data-tip={intl.formatMessage(messages.reload)}
+          data-tooltip-id="tooltip-web-controls"
+          data-tooltip-content={intl.formatMessage(messages.reload)}
           data-place="bottom"
         >
           <Icon icon={mdiReload} className={classes.icon} />
@@ -232,11 +237,18 @@ class WebControls extends Component<IProps, IState> {
           onClick={openInBrowser}
           type="button"
           className={classes.button}
-          data-tip={intl.formatMessage(messages.openInBrowser)}
+          data-tooltip-id="tooltip-web-controls"
+          data-tooltip-content={intl.formatMessage(messages.openInBrowser)}
           data-place="bottom"
         >
           <Icon icon={mdiEarth} className={classes.icon} />
         </button>
+        <ReactTooltip
+          id="tooltip-web-controls"
+          place="bottom"
+          variant="dark"
+          style={{ height: 'auto' }}
+        />
       </div>
     );
   }