[fix] Tippy tooltips in animation controls (#2888)

- Replacing react-tooltip tooltips in animation controls which don't work correctly when used in programable environments Signed-off-by: Ihor Dykhta <[email protected]>
keplergl · Jan 3, 2025 · 79801be · 79801be
1 parent 0ad5372
commit 79801be
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 46 deletions.
diff --git a/src/components/src/common/animation-control/play-control.tsx b/src/components/src/common/animation-control/play-control.tsx
@@ -4,10 +4,8 @@
 import React from 'react';
 import classnames from 'classnames';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
-
-const DELAY_SHOW = 500;
+import TippyTooltip from '../tippy-tooltip';
 
 function PlayControlFactory() {
   const PlayControl = ({
@@ -21,23 +19,24 @@ function PlayControlFactory() {
     buttonHeight
   }) => {
     return showAnimationWindowControl ? null : (
-      <IconButton
-        data-tip
-        data-for="animate-play-pause"
-        className={classnames('playback-control-button', {active: isAnimating})}
-        onClick={isAnimating ? pauseAnimation : startAnimation}
-        hide={isSpeedControlVisible}
-        {...btnStyle}
+      <TippyTooltip
+        placement="top"
+        delay={[500, 0]}
+        render={() => <FormattedMessage id={isAnimating ? 'tooltip.pause' : 'tooltip.play'} />}
       >
-        {isAnimating ? (
-          <playbackIcons.pause height={buttonHeight} />
-        ) : (
-          <playbackIcons.play height={buttonHeight} />
-        )}
-        <Tooltip id="animate-play-pause" place="top" delayShow={DELAY_SHOW} effect="solid">
-          <FormattedMessage id={isAnimating ? 'tooltip.pause' : 'tooltip.play'} />
-        </Tooltip>
-      </IconButton>
+        <IconButton
+          className={classnames('playback-control-button', {active: isAnimating})}
+          onClick={isAnimating ? pauseAnimation : startAnimation}
+          hide={isSpeedControlVisible}
+          {...btnStyle}
+        >
+          {isAnimating ? (
+            <playbackIcons.pause height={buttonHeight} />
+          ) : (
+            <playbackIcons.play height={buttonHeight} />
+          )}
+        </IconButton>
+      </TippyTooltip>
     );
   };
 

diff --git a/src/components/src/common/animation-control/reset-control.tsx b/src/components/src/common/animation-control/reset-control.tsx
@@ -3,10 +3,8 @@
 
 import React from 'react';
 import {FormattedMessage} from '@kepler.gl/localization';
-import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
-
-const DELAY_SHOW = 500;
+import TippyTooltip from '../tippy-tooltip';
 
 function ResetControlFactory() {
   const ResetControl = ({
@@ -17,18 +15,15 @@ function ResetControlFactory() {
     buttonHeight
   }) => {
     return showAnimationWindowControl ? null : (
-      <IconButton
-        data-tip
-        data-for="animate-reset"
-        className="playback-control-button"
-        onClick={resetAnimation}
-        {...btnStyle}
+      <TippyTooltip
+        placement="top"
+        delay={[500, 0]}
+        render={() => <FormattedMessage id="tooltip.reset" />}
       >
-        <playbackIcons.reset height={buttonHeight} />
-        <Tooltip id="animate-reset" place="top" delayShow={DELAY_SHOW} effect="solid">
-          <FormattedMessage id="tooltip.reset" />
-        </Tooltip>
-      </IconButton>
+        <IconButton className="playback-control-button" onClick={resetAnimation} {...btnStyle}>
+          <playbackIcons.reset height={buttonHeight} />
+        </IconButton>
+      </TippyTooltip>
     );
   };
 

diff --git a/src/components/src/common/animation-control/speed-control.tsx b/src/components/src/common/animation-control/speed-control.tsx
@@ -3,10 +3,10 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import {Tooltip} from '../styled-components';
 import IconButton from '../icon-button';
 import {media} from '@kepler.gl/styles';
 import {preciseRound} from '@kepler.gl/utils';
+import TippyTooltip from '../tippy-tooltip';
 
 const StyledSpeedControl = styled.div`
   display: flex;
@@ -20,7 +20,6 @@ const StyledSpeedControl = styled.div`
   }
 `;
 
-const DELAY_SHOW = 500;
 const PRECISE_SPEED_ROUND = 1;
 
 function SpeedControlFactory(AnimationSpeedSlider) {
@@ -36,18 +35,19 @@ function SpeedControlFactory(AnimationSpeedSlider) {
   }) => {
     return showAnimationWindowControl || !updateAnimationSpeed ? null : (
       <StyledSpeedControl>
-        <IconButton
-          data-tip
-          data-for="animate-speed"
-          className="playback-control-button"
-          {...btnStyle}
-          onClick={hideAndShowSpeedControl}
+        <TippyTooltip
+          placement="top"
+          delay={[500, 0]}
+          render={() => <span>{preciseRound(speed, PRECISE_SPEED_ROUND)}x</span>}
         >
-          <playbackIcons.speed height={buttonHeight} />
-          <Tooltip id="animate-speed" place="top" delayShow={DELAY_SHOW} effect="solid">
-            <span>{preciseRound(speed, PRECISE_SPEED_ROUND)}x</span>
-          </Tooltip>
-        </IconButton>
+          <IconButton
+            className="playback-control-button"
+            {...btnStyle}
+            onClick={hideAndShowSpeedControl}
+          >
+            <playbackIcons.speed height={buttonHeight} />
+          </IconButton>
+        </TippyTooltip>
         {isSpeedControlVisible ? (
           <AnimationSpeedSlider
             onHide={hideAndShowSpeedControl}