change(ui) - tooltip replacement

frontend/app/components/Alerts/Notifications/Notifications.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import stl from './notifications.module.css';
 import { connect } from 'react-redux';
-import { Icon, Popup, Tooltip } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { fetchList, setViewed, clearAll } from 'Duck/notifications';
 import { setLastRead } from 'Duck/announcements';
 import { useModal } from 'App/components/Modal';
@@ -29,7 +29,7 @@ function Notifications(props: Props) {
   }, []);
 
   return useObserver(() => (
-    <Tooltip tooltip={`Alerts`}>
+    <Tooltip title={`Alerts`}>
       <div
         className={stl.button}
         onClick={() => showModal(<AlertTriggersModal />, { right: true })}

frontend/app/components/Assist/components/AssistActions/AssistActions.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Popup, Button } from 'UI';
+import { Popup, Button, Tooltip } from 'UI';
 import { connect } from 'react-redux';
 import cn from 'classnames';
 import { toggleChatWindow } from 'Duck/sessions';
@@ -19,7 +19,6 @@ import {
 } from 'Player/MessageDistributor/managers/AssistManager';
 import RequestLocalStream from 'Player/MessageDistributor/managers/LocalStream';
 import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream';
-import { Tooltip } from 'react-tippy';
 import { toast } from 'react-toastify';
 import { confirm } from 'UI';
 import stl from './AassistActions.module.css';

frontend/app/components/Dashboard/components/DashboardView/DashboardView.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
-import { Button, PageTitle, Loader } from 'UI';
+import { Button, PageTitle, Loader, Tooltip, Popover } from 'UI';
 import { withSiteId } from 'App/routes';
 import withModal from 'App/components/Modal/withModal';
 import DashboardWidgetGrid from '../DashboardWidgetGrid';
@@ -15,7 +15,6 @@ import withPageTitle from 'HOCs/withPageTitle';
 import withReport from 'App/components/hocs/withReport';
 import DashboardOptions from '../DashboardOptions';
 import SelectDateRange from 'Shared/SelectDateRange';
-import { Tooltip } from 'react-tippy';
 import Breadcrumb from 'Shared/Breadcrumb';
 import AddMetricContainer from '../DashboardWidgetGrid/AddMetricContainer';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
@@ -126,24 +125,25 @@ function DashboardView(props: Props) {
             <PageTitle
               title={
                 // @ts-ignore
-                <Tooltip delay={100} arrow title="Double click to rename">
+                <Tooltip title="Double click to rename">
                   {dashboard?.name}
                 </Tooltip>
               }
               onDoubleClick={() => onEdit(true)}
               className="mr-3 select-none border-b border-b-borderColor-transparent hover:border-dotted hover:border-gray-medium cursor-pointer"
               actionButton={
-                <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
+                // <OutsideClickDetectingDiv onClickOutside={() => setShowTooltip(false)}>
-                  <Tooltip
+                  <Popover
-                    open={showTooltip}
+                    // open={showTooltip}
-                    interactive
+                    // interactive
-                    useContext
+                    // useContext
                     // @ts-ignore
-                    theme="nopadding"
+                    // theme="nopadding"
-                    hideDelay={0}
+                    // hideDelay={0}
-                    duration={0}
+                    // duration={0}
-                    distance={20}
+                    // distance={20}
-                    html={
+                    placement="left"
+                    render={() => showTooltip && (
                       <div style={{ padding: 0 }}>
                         <AddMetricContainer
                           onAction={() => setShowTooltip(false)}
@@ -151,13 +151,13 @@ function DashboardView(props: Props) {
                           siteId={siteId}
                         />
                       </div>
-                    }
+                    )}
                   >
                     <Button variant="primary" onClick={() => setShowTooltip(true)}>
                       Add Metric
                     </Button>
-                  </Tooltip>
+                  </Popover>
-                </OutsideClickDetectingDiv>
+                // </OutsideClickDetectingDiv>
               }
             />
           </div>

frontend/app/components/Dashboard/components/MetricListItem/MetricListItem.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Icon, Link } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { checkForRecent } from 'App/date';
-import { Tooltip } from 'react-tippy'
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { withSiteId } from 'App/routes';
 
@@ -24,9 +23,7 @@ function MetricTypeIcon({ type }: any) {
 
     return (
         <Tooltip
-            html={<div className="capitalize">{type}</div>}
+            title={<div className="capitalize">{type}</div>}
-            position="top"
-            arrow
         >
             <div className="w-9 h-9 rounded-full bg-tealx-lightest flex items-center justify-center mr-2">
                 <Icon name={getIcon()} size="16" color="tealx" />

frontend/app/components/Dashboard/components/WidgetName/WidgetName.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import cn from 'classnames';
-import { Tooltip } from 'react-tippy';
 
 interface Props {
   name: string;
@@ -65,7 +64,7 @@ function WidgetName(props: Props) {
         />
       ) : (
         // @ts-ignore
-        <Tooltip delay={100} arrow title="Double click to rename" disabled={!canEdit}>
+        <Tooltip title="Double click to rename" disabled={!canEdit}>
           <div 
             onDoubleClick={() => setEditing(true)} 
             className={

frontend/app/components/Funnels/FunnelWidget/FunnelBar.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import FunnelStepText from './FunnelStepText';
-import { Icon, Popup } from 'UI';
+import { Icon, Tooltip } from 'UI';
-import { Tooltip } from 'react-tippy';
 
 interface Props {
   filter: any;

frontend/app/components/Session_/Autoplay/Autoplay.js

@@ -1,77 +1,83 @@
-import React, { useEffect } from 'react'
+import React, { useEffect } from 'react';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
-import { setAutoplayValues } from 'Duck/sessions'
+import { setAutoplayValues } from 'Duck/sessions';
 import { session as sessionRoute } from 'App/routes';
-import { Link, Icon, Toggler } from 'UI';
+import { Link, Icon, Toggler, Tooltip } from 'UI';
 import { connectPlayer } from 'Player/store';
 import { Controls as PlayerControls } from 'Player';
-import { Tooltip } from 'react-tippy';
 import cn from 'classnames';
 
 function Autoplay(props) {
-  const { previousId, nextId, autoplay, disabled } = props
+  const { previousId, nextId, autoplay, disabled } = props;
 
   useEffect(() => {
-    props.setAutoplayValues()
+    props.setAutoplayValues();
-  }, [])
+  }, []);
 
   return (
     <div className="flex items-center">
-      <div onClick={props.toggleAutoplay} className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2">
+      <div
-        <Toggler
+        onClick={props.toggleAutoplay}
-          name="sessionsLive"
+        className="cursor-pointer flex items-center mr-2 hover:bg-gray-light-shade rounded-md p-2"
-          onChange={ props.toggleAutoplay }
+      >
-          checked={ autoplay }
+        <Toggler name="sessionsLive" onChange={props.toggleAutoplay} checked={autoplay} />
-        />
         <span className="ml-2">Auto-Play</span>
       </div>
 
       <Tooltip
-        delay={0}
+        placement="bottom"
-        arrow
+        title={<div className="whitespace-nowrap">Play Previous Session</div>}
-        animation="fade"
-        position="bottom center"
-        title="Play Previous Session"
         disabled={!previousId}
-        className={cn(
-          "p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium",
-          previousId && 'cursor-pointer',
-          !disabled && nextId&& 'hover:bg-bg-blue'
-        )}
       >
-        <Link to={ sessionRoute(previousId) } disabled={!previousId}>
+        <Link to={sessionRoute(previousId)} disabled={!previousId}>
-          <Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
+          <div
+            className={cn(
+              'p-1 bg-gray-bg group rounded-full color-gray-darkest font-medium',
+              previousId && 'cursor-pointer',
+              !disabled && nextId && 'hover:bg-bg-blue'
+            )}
+          >
+            <Icon name="prev1" className="group-hover:fill-main" color="inherit" size="16" />
+          </div>
         </Link>
       </Tooltip>
 
       <Tooltip
-        delay={0}
+        placement="bottom"
-        arrow
+        title={<div className="whitespace-nowrap">Play Next Session</div>}
-        animation="fade"
-        position="bottom center"
-        title="Play Next Session"
         disabled={!nextId}
-        className={cn(
-          "p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium",
-          nextId && 'cursor-pointer',
-          !disabled && nextId && 'hover:bg-bg-blue',
-        )}
       >
-        <Link to={ sessionRoute(nextId) } disabled={!nextId} >
+        <Link to={sessionRoute(nextId)} disabled={!nextId}>
-          <Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
+          <div
+            className={cn(
+              'p-1 bg-gray-bg group ml-1 rounded-full color-gray-darkest font-medium',
+              nextId && 'cursor-pointer',
+              !disabled && nextId && 'hover:bg-bg-blue'
+            )}
+          >
+            <Icon name="next1" className="group-hover:fill-main" color="inherit" size="16" />
+          </div>
         </Link>
       </Tooltip>
     </div>
-  )
+  );
 }
 
-const connectAutoplay = connect(state => ({
+const connectAutoplay = connect(
-  previousId: state.getIn([ 'sessions', 'previousId' ]),
+  (state) => ({
-  nextId: state.getIn([ 'sessions', 'nextId' ]),
+    previousId: state.getIn(['sessions', 'previousId']),
-}), { setAutoplayValues })
+    nextId: state.getIn(['sessions', 'nextId']),
+  }),
+  { setAutoplayValues }
+);
 
-export default connectAutoplay(connectPlayer(state => ({
+export default connectAutoplay(
-  autoplay: state.autoplay,
+  connectPlayer(
-}), {
+    (state) => ({
-  toggleAutoplay: PlayerControls.toggleAutoplay
+      autoplay: state.autoplay,
-})(Autoplay))
+    }),
+    {
+      toggleAutoplay: PlayerControls.toggleAutoplay,
+    }
+  )(Autoplay)
+);

frontend/app/components/Session_/BugReport/components/ReportTitle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import cn from 'classnames';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 function ReportTitle() {
   const { bugReportStore } = useStore();
@@ -45,7 +45,7 @@ function ReportTitle() {
         />
       ) : (
         // @ts-ignore
-        <Tooltip delay={100} arrow title="Double click to rename">
+        <Tooltip title="Double click to rename">
           <div
             onDoubleClick={toggleEdit}
             className={cn(

frontend/app/components/Session_/BugReport/components/Session.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import SectionTitle from './SectionTitle';
-import { Icon } from 'UI'
+import { Icon, Tooltip } from 'UI'
-import { Tooltip } from 'react-tippy'
 
 export default function Session({ user, sessionUrl }: { user: string, sessionUrl: string }) {
 

frontend/app/components/Session_/BugReport/components/StepsComponents/EventStep.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Icon, ItemMenu } from 'UI';
+import { Icon, ItemMenu, Tooltip } from 'UI';
 import { observer } from 'mobx-react-lite';
 import { Step as IStep } from '../../types';
 const STEP_NAMES = { CLICKRAGE: 'Multiple click', CLICK: 'Clicked', LOCATION: 'Visited' };
@@ -7,7 +7,6 @@ import { useStore } from 'App/mstore';
 import cn from 'classnames';
 import { ErrorComp, NetworkComp, NoteComp } from './SubModalItems';
 import { durationFromMs } from 'App/date';
-import { Tooltip } from 'react-tippy';
 
 const SUBSTEP = {
   network: NetworkComp,
@@ -80,7 +79,7 @@ function Step({ step, ind, isDefault }: { step: IStep; ind: number; isDefault?:
                 />
               </Tooltip>
               {/* @ts-ignore */}
-              <Tooltip title="Delete Step">
+              <Tooltip title="Delete Step" className="whitespace-nowrap">
                 <div onClick={() => bugReportStore.removeStep(step)}>
                   <Icon name="trash" size={16} className="cursor-pointer hover:fill-gray-darkest" />
                 </div>

frontend/app/components/Session_/BugReport/components/StepsComponents/StepRadius.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy'
+import { Tooltip } from 'UI'
 
 interface Props {
   pickRadius: number;
@@ -11,7 +11,7 @@ function StepRadius({ pickRadius, setRadius }: Props) {
     <div className="w-full flex items-center gap-4">
       <div className="border-b border-dotted border-gray-medium cursor-help">
         {/* @ts-ignore */}
-        <Tooltip html={<span>Closest step to the selected timestamp &plusmn; {pickRadius}.</span>}>
+        <Tooltip title={<span>Closest step to the selected timestamp &plusmn; {pickRadius}.</span>}>
         <span>&plusmn; {pickRadius}</span>
         </Tooltip>
       </div>

frontend/app/components/Session_/EventsBlock/UserCard/UserCard.js

@@ -5,11 +5,10 @@ import { countries } from 'App/constants';
 import { useStore } from 'App/mstore';
 import { browserIcon, osIcon, deviceTypeIcon } from 'App/iconNames';
 import { formatTimeOrDate } from 'App/date';
-import { Avatar, TextEllipsis, CountryFlag, Icon } from 'UI';
+import { Avatar, TextEllipsis, CountryFlag, Icon, Tooltip } from 'UI';
 import cn from 'classnames';
 import { withRequest } from 'HOCs';
 import SessionInfoItem from '../../SessionInfoItem';
-import { Tooltip } from 'react-tippy';
 import { useModal } from 'App/components/Modal';
 import UserSessionsModal from 'Shared/UserSessionsModal';
 
@@ -77,12 +76,13 @@ function UserCard({ className, request, session, width, height, similarSessions,
                         </span>
                         <span className="mx-1 font-bold text-xl">&#183;</span>
                         <Tooltip
-                            theme="light"
+                            // theme="light"
                             delay={0}
-                            hideOnClick="persistent"
+                            // hideOnClick="persistent"
-                            arrow
+                            // arrow
-                            interactive
+                            // interactive
-                            html={
+                            className="!bg-white shadow border !color-gray-dark"
+                            title={
                                 <div className="text-left">
                                     <SessionInfoItem
                                         comp={<CountryFlag country={userCountry} />}
@@ -100,9 +100,9 @@ function UserCard({ className, request, session, width, height, similarSessions,
                                     {revId && <SessionInfoItem icon="info" label="Rev ID:" value={revId} isLast />}
                                 </div>
                             }
-                            position="bottom center"
+                            position="bottom"
-                            hoverable
+                            // hoverable
-                            disabled={false}
+                            // disabled={false}
                             on="hover"
                         >
                             <span className="color-teal cursor-pointer">More</span>

frontend/app/components/Session_/Issues/Issues.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Popup, Button, Icon } from 'UI';
+import { Icon, Popover } from 'UI';
-import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import IssuesModal from './IssuesModal';
 import { fetchProjects, fetchMeta } from 'Duck/assignments';
 import stl from './issues.module.css';
-import { Tooltip } from 'react-tippy';
 
 @connect(
   (state) => ({
@@ -71,32 +69,25 @@ class Issues extends React.Component {
     return (
       <div className="relative h-full w-full p-3">
         <div className={stl.buttonWrapper}>
-          <OutsideClickDetectingDiv onClickOutside={this.closeModal}>
+          <Popover
-            <Tooltip
+            render={({ close }) => (
-              open={this.state.showModal}
+              <div>
-              position="bottom"
+                <IssuesModal
-              interactive
+                  provider={provider}
-              trigger="click"
+                  sessionId={sessionId}
-              unmountHTMLWhenHide
+                  closeHandler={close}
-              useContext
+                />
-              theme="light"
+              </div>
-              arrow
+            )}
-              html={
+          >
-                <div>
+            <div
-                  <IssuesModal
+              className="flex items-center"
-                    provider={provider}
+              disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}
-                    sessionId={sessionId}
-                    closeHandler={this.closeModal}
-                  />
-                </div>
-              }
             >
-              <div className="flex items-center" onClick={this.handleOpen} disabled={!isModalDisplayed && (metaLoading || fetchIssuesLoading || projectsLoading)}>
+              <Icon name={`integrations/${provider === 'jira' ? 'jira' : 'github'}`} size="16" />
-                    <Icon name={ `integrations/${ provider === 'jira' ? 'jira' : 'github'}` } size="16" />
+              <span className="ml-2">Create Issue</span>
-                    <span className="ml-2">Create Issue</span>
+            </div>
-                </div>
+          </Popover>
-            </Tooltip>
-          </OutsideClickDetectingDiv>
         </div>
       </div>
     );

frontend/app/components/Session_/Player/Controls/Controls.js

@@ -10,7 +10,7 @@ import {
 import LiveTag from 'Shared/LiveTag';
 import { jumpToLive } from 'Player';
 
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import { toggleInspectorMode } from 'Player';
 import {
   fullscreenOn,
@@ -33,7 +33,6 @@ import ControlButton from './ControlButton';
 import PlayerControls from './components/PlayerControls';
 
 import styles from './controls.module.css';
-import { Tooltip } from 'react-tippy';
 import XRayButton from 'Shared/XRayButton';
 
 const SKIP_INTERVALS = {
@@ -227,11 +226,7 @@ export default class Controls extends React.Component {
 
     return (
       <Tooltip
-        delay={0}
-        position="top"
         title={label}
-        interactive
-        hideOnClick="persistent"
         className="mr-4"
       >
         <div

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy';
+import { Icon, Tooltip, Popover } from 'UI';
-import { Icon } from 'UI';
 import cn from 'classnames';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import { ReduxTime } from '../Time';
@@ -49,7 +48,7 @@ function PlayerControls(props: Props) {
   const speedRef = React.useRef(null);
   const arrowBackRef = React.useRef(null);
   const arrowForwardRef = React.useRef(null);
-  const skipRef = React.useRef<HTMLDivElement>()
+  const skipRef = React.useRef<HTMLDivElement>();
 
   React.useEffect(() => {
     const handleKeyboard = (e: KeyboardEvent) => {
@@ -77,11 +76,12 @@ function PlayerControls(props: Props) {
     setShowTooltip(!showTooltip);
   };
   const handleClickOutside = () => {
-    setShowTooltip(false)
+    setShowTooltip(false);
-  }
+  };
   return (
     <div className="flex items-center">
       {playButton}
+      <div className="mx-1" />
       {!live && (
         <div className="flex items-center font-semibold text-center" style={{ minWidth: 85 }}>
           {/* @ts-ignore */}
@@ -94,7 +94,7 @@ function PlayerControls(props: Props) {
 
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
         {/* @ts-ignore */}
-        <Tooltip title="Rewind 10s" delay={0} position="top">
+        <Tooltip title="Rewind 10s" position="top">
           <button
             ref={arrowBackRef}
             className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
@@ -109,17 +109,17 @@ function PlayerControls(props: Props) {
           </button>
         </Tooltip>
         <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border">
-        <OutsideClickDetectingDiv onClickOutside={handleClickOutside}>
+          <OutsideClickDetectingDiv onClickOutside={handleClickOutside}>
-          <Tooltip
+            <Popover
-            open={showTooltip}
+              // open={showTooltip}
-            interactive
+              // interactive
-            // @ts-ignore
+              // @ts-ignore
-            theme="nopadding"
+              theme="nopadding"
-            animation="none"
+              animation="none"
-            duration={0}
+              duration={0}
-            className="cursor-pointer select-none"
+              className="cursor-pointer select-none"
-            distance={20}
+              distance={20}
-            html={
+              render={() => (
                 <div className="flex flex-col bg-white border border-borderColor-gray-light-shade text-figmaColors-text-primary rounded">
                   <div className="font-semibold py-2 px-4 w-full text-left">
                     Jump <span className="text-disabled-text">(Secs)</span>
@@ -141,19 +141,19 @@ function PlayerControls(props: Props) {
                     </div>
                   ))}
                 </div>
-            }
+              )}
-          >
+            >
-            <div onClick={toggleTooltip} ref={skipRef}>
+              <div onClick={toggleTooltip} ref={skipRef}>
-              {/* @ts-ignore */}
+                {/* @ts-ignore */}
-              <Tooltip disabled={showTooltip} title="Set default skip duration">
+                <Tooltip disabled={showTooltip} title="Set default skip duration">
-                {currentInterval}s
+                  {currentInterval}s
-              </Tooltip>
+                </Tooltip>
-            </div>
+              </div>
-          </Tooltip>
+            </Popover>
           </OutsideClickDetectingDiv>
         </div>
         {/* @ts-ignore */}
-        <Tooltip title="Forward 10s" delay={0} position="top">
+        <Tooltip title="Forward 10s" position="top">
           <button
             ref={arrowForwardRef}
             className="h-full hover:border-active-blue-border focus:border focus:border-blue  border-borderColor-transparent"
@@ -173,7 +173,7 @@ function PlayerControls(props: Props) {
         <div className="flex items-center">
           <div className="mx-2" />
           {/* @ts-ignore */}
-          <Tooltip title="Control play back speed (↑↓)" delay={0} position="top">
+          <Tooltip title="Control play back speed (↑↓)" placement="top">
             <button
               ref={speedRef}
               className={cn(styles.speedButton, 'focus:border focus:border-blue')}
@@ -185,10 +185,10 @@ function PlayerControls(props: Props) {
           </Tooltip>
           <div className="mx-2" />
           <button
-            className={cn(
+            className={cn(styles.skipIntervalButton, {
-              styles.skipIntervalButton,
+              [styles.withCheckIcon]: skip,
-              { [styles.withCheckIcon]: skip, [styles.active]: skip },
+              [styles.active]: skip,
-            )}
+            })}
             onClick={toggleSkip}
             data-disabled={disabled}
           >

frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx

@@ -1,10 +1,9 @@
-//@ts-nocheck
 import React from 'react';
 import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/StatedScreen';
 import cn from 'classnames';
 import stl from './Marker.module.css';
 import { activeTarget } from 'Player';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 interface Props {
   target: MarkedTarget;
@@ -17,23 +16,17 @@ export default function Marker({ target, active }: Props) {
     left: `${target.boundingRect.left}px`,
     width: `${target.boundingRect.width}px`,
     height: `${target.boundingRect.height}px`,
-  }
+  };
   return (
-    <div className={cn(stl.marker, { [stl.active]: active })} style={style} onClick={() => activeTarget(target.index)}>
+    <div
+      className={cn(stl.marker, { [stl.active]: active })}
+      style={style}
+      onClick={() => activeTarget(target.index)}
+    >
       <div className={stl.index}>{target.index + 1}</div>
-      {/* @ts-expect-error Tooltip doesn't have children property */}
+      <Tooltip open={active} delay={0} title={<div>{target.count} Clicks</div>}>
-      <Tooltip
-        open={active}
-        arrow
-        sticky
-        distance={15}
-        html={(
-          <div>{target.count} Clicks</div>
-        )}
-        trigger="mouseenter"
-      >
         <div className="absolute inset-0"></div>
       </Tooltip>
     </div>
-  )
+  );
-}
+}

frontend/app/components/Session_/SessionInfoItem/SessionInfoItem.tsx

@@ -12,7 +12,7 @@ interface Props {
 export default function SessionInfoItem(props: Props) {
     const { label, icon, value, comp, isLast = false } = props
     return (
-        <div className={cn("flex items-center w-full py-2", {'border-b' : !isLast})}>
+        <div className={cn("flex items-center w-full py-2 color-gray-dark", {'border-b' : !isLast})}>
             <div className="px-2 capitalize" style={{ width: '30px' }}>
                 { icon && <Icon name={icon} size="16" /> }
                 { comp && comp }

frontend/app/components/Session_/Storage/Storage.js

@@ -8,7 +8,7 @@ import {
   selectStorageListNow,
   selectStorageList,
 } from 'Player/store';
-import { JSONTree, NoContent } from 'UI';
+import { JSONTree, NoContent, Tooltip } from 'UI';
 import { formatMs } from 'App/date';
 import { diff } from 'deep-diff';
 import { jump } from 'Player';
@@ -17,7 +17,6 @@ import BottomBlock from '../BottomBlock/index';
 import DiffRow from './DiffRow';
 import cn from 'classnames';
 import stl from './storage.module.css';
-import { Tooltip } from 'react-tippy'
 
 // const STATE = 'STATE';
 // const DIFF = 'DIFF';

frontend/app/components/Session_/Subheader.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Icon } from 'UI';
+import { Icon, Tooltip } from 'UI';
 import Autoplay from './Autoplay';
 import Bookmark from 'Shared/Bookmark';
 import SharePopup from '../shared/SharePopup/SharePopup';
 import copy from 'copy-to-clipboard';
-import { Tooltip } from 'react-tippy';
 import Issues from './Issues/Issues';
 import NotePopup from './components/NotePopup';
 import { connectPlayer, pause } from 'Player';
@@ -46,14 +45,7 @@ function SubHeader(props) {
           }}
         >
           <Icon size="20" name="event/link" className="mr-1" />
-          <Tooltip
+          <Tooltip title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}>
-            delay={0}
-            arrow
-            animation="fade"
-            hideOnClick={false}
-            position="bottom center"
-            title={isCopied ? 'URL Copied to clipboard' : 'Click to copy'}
-          >
             {location}
           </Tooltip>
         </div>

frontend/app/components/hocs/withCopy.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import copy from 'copy-to-clipboard';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 const withCopy = (WrappedComponent: React.ComponentType) => {
     const ComponentWithCopy = (props: any) => {
@@ -15,7 +15,7 @@ const withCopy = (WrappedComponent: React.ComponentType) => {
         };
         return (
             <div onClick={() => copyToClipboard(value)} className="w-fit">
-                <Tooltip delay={0} arrow animation="fade" hideOnClick={false} title={copied ? tooltip : 'Click to copy'}>
+                <Tooltip title={copied ? tooltip : 'Click to copy'}>
                     <WrappedComponent {...props} copyToClipboard={copyToClipboard} />
                 </Tooltip>
             </div>

frontend/app/components/shared/CopyText/CopyText.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 import copy from 'copy-to-clipboard';
 
 interface Props {
@@ -17,14 +17,7 @@ function CopyText(props: Props) {
     setTimeout(() => setIsCopied(false), 5000);
   };
   return (
-    // @ts-ignore
+    <Tooltip delay={0} title={isCopied ? afterLabel : label}>
-    <Tooltip
-      delay={0}
-      arrow
-      animation="fade"
-      hideOnClick={false}
-      title={isCopied ? afterLabel : label}
-    >
       <span onClick={onClick}>{children}</span>
     </Tooltip>
   );

frontend/app/components/shared/GuidePopup/GuidePopup.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'react-tippy';
+import { Tooltip } from 'UI';
 
 export const FEATURE_KEYS = {
   XRAY: 'featureViewed'
@@ -16,7 +16,7 @@ export default function GuidePopup({ children, title, description }: IProps) {
   return (
     // @ts-ignore
     <Tooltip
-      html={
+      title={
         <div>
           <div className="font-bold">
             {title}
@@ -26,10 +26,10 @@ export default function GuidePopup({ children, title, description }: IProps) {
           </div>
         </div>
       }
-      distance={30}
+      // distance={30}
-      theme={'light'}
+      // theme={'light'}
       open={true}
-      arrow={true}
+      // arrow={true}
     >
       {children}
     </Tooltip>

frontend/app/components/shared/SavedSearch/components/SavedSearchModal/SavedSearchModal.tsx

@@ -2,7 +2,7 @@ import React, { MouseEvent, useState } from 'react';
 import cn from 'classnames';
 import { Icon, Input } from 'UI';
 import { List } from 'immutable';
-import { confirm, Popup } from 'UI';
+import { confirm, Tooltip } from 'UI';
 import { applySavedSearch, remove, editSavedSearch } from 'Duck/search';
 import { connect } from 'react-redux';
 import { useModal } from 'App/components/Modal';
@@ -18,9 +18,10 @@ interface ITooltipIcon {
 function TooltipIcon(props: ITooltipIcon) {
     return (
         <div onClick={(e) => props.onClick(e)}>
-            <Popup content={props.title} hideOnClick={true}>
+            <Tooltip title={props.title}>
+                {/* @ts-ignore */}
                 <Icon size="16" name={props.name} color="main" />
-            </Popup>
+            </Tooltip>
         </div>
     );
 }

frontend/app/components/shared/SessionItem/SessionItem.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
-import { CountryFlag, Avatar, TextEllipsis, Label, Icon } from 'UI';
+import { CountryFlag, Avatar, TextEllipsis, Label, Icon, Tooltip } from 'UI';
 import { useStore } from 'App/mstore';
 import { observer } from 'mobx-react-lite';
 import { durationFormatted, formatTimeOrDate } from 'App/date';
@@ -12,7 +12,6 @@ import PlayLink from './PlayLink';
 import ErrorBars from './ErrorBars';
 import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes';
 import { capitalize } from 'App/utils';
-import { Tooltip } from 'react-tippy';
 
 const ASSIST_ROUTE = assistRoute();
 const ASSIST_LIVE_SESSION = liveSession();

frontend/app/components/shared/SessionListContainer/components/SessionSettingButton/SessionSettingButton.tsx

@@ -2,7 +2,6 @@ import { useModal } from 'App/components/Modal';
 import React from 'react';
 import SessionSettings from 'Shared/SessionSettings';
 import { Button, Tooltip } from 'UI';
-// import { Tooltip } from 'react-tippy';
 
 function SessionSettingButton(props: any) {
     const { showModal } = useModal();
@@ -13,8 +12,7 @@ function SessionSettingButton(props: any) {
 
     return (
         <div className="cursor-pointer ml-4" onClick={handleClick}>
-            {/* @ts-ignore */}
+            <Tooltip title="Session Settings">
-            <Tooltip tooltip="Session Settings">
                 <Button icon="sliders" variant="text" />
             </Tooltip>
         </div>

frontend/app/components/shared/XRayButton/XRayButton.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import stl from './xrayButton.module.css';
 import cn from 'classnames';
-import { Popup } from 'UI';
+import { Tooltip } from 'UI';
 import GuidePopup, { FEATURE_KEYS } from 'Shared/GuidePopup';
 import { Controls as Player } from 'Player';
 import { INDEXES } from 'App/constants/zindex';
@@ -63,14 +63,14 @@ function XRayButton(props: Props) {
             ></div>
           </GuidePopup>
         ) : (
-          <Popup content="Get a quick overview on the issues in this session." disabled={isActive}>
+          <Tooltip title="Get a quick overview on the issues in this session." disabled={isActive}>
             <button
               className={cn(stl.wrapper, { [stl.default]: !isActive, [stl.active]: isActive })}
               onClick={onClick}
             >
               <span className="z-1">X-RAY</span>
             </button>
-          </Popup>
+          </Tooltip>
         )}
       </div>
     </>

frontend/app/components/ui/Popover/Popover.tsx

@@ -14,6 +14,7 @@ import {
   FloatingFocusManager,
 } from '@floating-ui/react-dom-interactions';
 import { mergeRefs } from 'react-merge-refs';
+import { INDEXES } from 'App/constants/zindex';
 
 interface Props {
   render: (data: { close: () => void; labelId: string; descriptionId: string }) => React.ReactNode;
@@ -62,6 +63,7 @@ const Popover = ({ children, render, placement }: Props) => {
               position: strategy,
               top: y ?? 0,
               left: x ?? 0,
+              zIndex: INDEXES.TOOLTIP
             }}
             aria-labelledby={labelId}
             aria-describedby={descriptionId}

frontend/app/components/ui/Tooltip/FloatingTooltip.tsx

@@ -14,16 +14,27 @@ import {
   FloatingPortal,
 } from '@floating-ui/react-dom-interactions';
 import type { Placement } from '@floating-ui/react-dom-interactions';
+import { INDEXES } from 'App/constants/zindex';
 
 export function useTooltipState({
+  disabled = false,
   initialOpen = false,
   placement = 'top',
+  delay,
 }: {
+  disabled?: boolean;
   initialOpen?: boolean;
   placement?: Placement;
+  delay?: number;
 } = {}) {
   const [open, setOpen] = React.useState(initialOpen);
 
+  React.useEffect(() => {
+    if (disabled) {
+      setOpen(false);
+    }
+  }, [disabled]);
+
   const data = useFloating({
     placement,
     open,
@@ -34,7 +45,7 @@ export function useTooltipState({
 
   const context = data.context;
 
-  const hover = useHover(context, { move: false, restMs: 500 });
+  const hover = useHover(context, { move: false, restMs: delay, enabled: !disabled });
   const focus = useFocus(context);
   const dismiss = useDismiss(context);
   const role = useRole(context, { role: 'tooltip' });
@@ -99,6 +110,7 @@ export const FloatingTooltip = React.forwardRef<
             left: state.x ?? 0,
             visibility: state.x == null ? 'hidden' : 'visible',
             transition: 'opacity 1s',
+            zIndex: INDEXES.TOOLTIP,
             ...props.style,
           }}
           {...state.getFloatingProps(props)}

frontend/app/components/ui/Tooltip/Tooltip.tsx

@@ -1,18 +1,28 @@
 import React from 'react';
 import { useTooltipState, TooltipAnchor, FloatingTooltip } from './FloatingTooltip';
+import type { Placement } from '@floating-ui/react-dom-interactions';
+import cn from 'classnames';
 
 interface Props {
-  // position: string;
+  title?: any;
-  tooltip: string;
   children: any;
+  disabled?: boolean;
+  open?: boolean;
+  placement?: Placement;
+  className?: string;
+  delay?: number;
 }
 function Tooltip(props: Props) {
-  const state = useTooltipState();
+  const { title, disabled = false, open = false, placement, className = '', delay = 500 } = props;
+  const state = useTooltipState({ disabled: disabled, placement, delay });
   return (
     <>
       <TooltipAnchor state={state}>{props.children}</TooltipAnchor>
-      <FloatingTooltip state={state} className="bg-gray-darkest color-white rounded py-1 px-2 animate-fade">
+      <FloatingTooltip
-        {props.tooltip}
+        state={state}
+        className={cn('bg-gray-darkest color-white rounded py-1 px-2 animate-fade', className)}
+      >
+        {title}
       </FloatingTooltip>
     </>
   );

frontend/app/constants/zindex.ts

@@ -2,11 +2,12 @@ export const INDEXES = {
   PLAYER_REQUEST_WINDOW: 10,
   BUG_REPORT_PICKER: 19,
   BUG_REPORT: 20,
-  POPUP_GUIDE_BG: 99998,
+  POPUP_GUIDE_BG: 99997,
-  POPUP_GUIDE_BTN: 99999,
+  POPUP_GUIDE_BTN: 99998,
-}
+  TOOLTIP: 99999,
+};
 
 export const getHighest = () => {
-  const allIndexes = Object.values(INDEXES)
+  const allIndexes = Object.values(INDEXES);
-  return allIndexes[allIndexes.length - 1] + 1
+  return allIndexes[allIndexes.length - 1] + 1;
-}
+};