#6703: tooltip content interaction.

ts/components/CallsList.tsx

@@ -459,7 +459,7 @@ export function CallsList({
           direction={TooltipPlacement.Bottom}
           content={i18n('icu:CallsList__ToggleFilterByMissedLabel')}
           theme={Theme.Dark}
-          delay={600}
+          showDelay={600}
         >
           <button
             className={classNames('CallsList__ToggleFilterByMissed', {

ts/components/LeftPaneDialog.tsx

@@ -180,6 +180,7 @@ export function LeftPaneDialog({
       <Tooltip
         content={message}
         direction={TooltipPlacement.Right}
+        hideDelay={100}
         className={classNames(
           TOOLTIP_CLASS_NAME,
           type && `${TOOLTIP_CLASS_NAME}--${type}`

ts/components/NavTabs.tsx

@@ -96,7 +96,7 @@ function NavTabsItem({
         content={label}
         theme={Theme.Dark}
         direction={isRTL ? TooltipPlacement.Left : TooltipPlacement.Right}
-        delay={600}
+        showDelay={600}
       >
         <span className="NavTabs__ItemButton">
           <span className="NavTabs__ItemContent">
@@ -158,7 +158,7 @@ export function NavTabsToggle({
         content={label}
         theme={Theme.Dark}
         direction={isRTL ? TooltipPlacement.Left : TooltipPlacement.Right}
-        delay={600}
+        showDelay={600}
       >
         <span className="NavTabs__ItemButton">
           <span className="NavTabs__ItemContent">
@@ -328,7 +328,7 @@ export function NavTabs({
                     content={i18n('icu:NavTabs__ItemLabel--Settings')}
                     theme={Theme.Dark}
                     direction={TooltipPlacement.Right}
-                    delay={600}
+                    showDelay={600}
                   >
                     <span className="NavTabs__ItemButton" ref={ref}>
                       <span className="NavTabs__ItemContent">
@@ -366,7 +366,7 @@ export function NavTabs({
               content={i18n('icu:NavTabs__ItemLabel--Profile')}
               theme={Theme.Dark}
               direction={isRTL ? TooltipPlacement.Left : TooltipPlacement.Right}
-              delay={600}
+              showDelay={600}
             >
               <span className="NavTabs__ItemButton">
                 <span className="NavTabs__ItemContent">

ts/components/Tooltip.stories.tsx

@@ -16,6 +16,8 @@ export default {
       options: Object.values(TooltipPlacement),
     },
     sticky: { control: { type: 'boolean' } },
+    showDelay: { control: { type: 'number' } },
+    hideDelay: { control: { type: 'number' } },
     theme: {
       control: { type: 'select' },
       options: Object.keys(Theme),
@@ -26,6 +28,8 @@ export default {
     content: 'Hello World',
     direction: TooltipPlacement.Top,
     sticky: false,
+    showDelay: 0,
+    hideDelay: 0,
   },
 } satisfies Meta<PropsType>;
 
@@ -83,6 +87,30 @@ export function Sticky(args: PropsType): JSX.Element {
   );
 }
 
+export function ShowDelay(args: PropsType): JSX.Element {
+  return (
+    <Tooltip {...args} showDelay={250}>
+      {Trigger}
+    </Tooltip>
+  );
+}
+
+export function HideDelay(args: PropsType): JSX.Element {
+  return (
+    <Tooltip {...args} hideDelay={250}>
+      {Trigger}
+    </Tooltip>
+  );
+}
+
+export function ShowHideDelay(args: PropsType): JSX.Element {
+  return (
+    <Tooltip {...args} showDelay={250} hideDelay={250}>
+      {Trigger}
+    </Tooltip>
+  );
+}
+
 export function WithAppliedPopperModifiers(args: PropsType): JSX.Element {
   return (
     <Tooltip

ts/components/Tooltip.tsx

@@ -89,11 +89,12 @@ export type PropsType = {
   sticky?: boolean;
   theme?: Theme;
   wrapperClassName?: string;
-  delay?: number;
+  showDelay?: number;
+  hideDelay?: number;
 };
 
 let GLOBAL_EXIT_TIMER: NodeJS.Timeout | undefined;
-let GLOBAL_TOOLTIP_DISABLE_DELAY = false;
+let GLOBAL_TOOLTIP_DISABLE_SHOW_DELAY = false;
 
 export function Tooltip({
   children,
@@ -104,12 +105,16 @@ export function Tooltip({
   theme,
   popperModifiers = [],
   wrapperClassName,
-  delay,
+  showDelay = 0,
+  hideDelay = 0,
 }: PropsType): JSX.Element {
   const timeoutRef = useRef<NodeJS.Timeout | undefined>();
+  const hideDelayTimeoutRef = useRef<NodeJS.Timeout | undefined>();
+  const popperDelayTimeoutRef = useRef<NodeJS.Timeout | undefined>();
   const [active, setActive] = React.useState(false);
+  const [popperHovering, setPopperHovering] = React.useState(false);
 
-  const showTooltip = active || Boolean(sticky);
+  const showTooltip = active || popperHovering || Boolean(sticky);
 
   const tooltipThemeClassName = theme
     ? `module-tooltip--${themeClassName(theme)}`
@@ -119,39 +124,55 @@ export function Tooltip({
     // Don't accept updates that aren't valid anymore
     clearTimeout(GLOBAL_EXIT_TIMER);
     clearTimeout(timeoutRef.current);
+    clearTimeout(hideDelayTimeoutRef.current);
 
-    // We can skip past all of this if there's no delay
-    if (delay != null) {
+    if (hovering) {
       // If we're now hovering, and delays haven't been disabled globally
       // we should start the timer to show the tooltip
-      if (hovering && !GLOBAL_TOOLTIP_DISABLE_DELAY) {
+      if (!GLOBAL_TOOLTIP_DISABLE_SHOW_DELAY) {
         timeoutRef.current = setTimeout(() => {
           setActive(true);
           // Since we have shown a tooltip we can now disable these delays
           // globally.
-          GLOBAL_TOOLTIP_DISABLE_DELAY = true;
-        }, delay);
-        return;
+          GLOBAL_TOOLTIP_DISABLE_SHOW_DELAY = true;
+        }, showDelay);
+      } else {
+        setActive(true);
       }
 
-      if (!hovering) {
-        // If we're not hovering, we should hide the tooltip immediately
+      return;
+    }
+
+    if (!hovering) {
+      // If we're not hovering, we should hide the tooltip based
+      // on the hide delay.
+      hideDelayTimeoutRef.current = setTimeout(() => {
         setActive(false);
+        clearTimeout(hideDelayTimeoutRef.current);
 
         // If we've disabled delays globally, we need to start a timer to undo
         // that after some time has passed.
-        if (GLOBAL_TOOLTIP_DISABLE_DELAY) {
+        if (GLOBAL_TOOLTIP_DISABLE_SHOW_DELAY) {
           GLOBAL_EXIT_TIMER = setTimeout(() => {
-            GLOBAL_TOOLTIP_DISABLE_DELAY = false;
+            GLOBAL_TOOLTIP_DISABLE_SHOW_DELAY = false;
 
-            // We're always going to use 300 here so that a tooltip with a really
-            // long delay doesn't affect all of the others
+            // We're always going to use 300 here so that a tooltip with a
+            // really long delay doesn't affect all of the others
           }, 300);
         }
-        return;
-      }
+      }, hideDelay);
     }
-    setActive(hovering);
+  }
+
+  function onPopperMouseEnter() {
+    setPopperHovering(true);
+  }
+
+  function onPopperMouseLeave() {
+    popperDelayTimeoutRef.current = setTimeout(() => {
+      setPopperHovering(false);
+      clearTimeout(popperDelayTimeoutRef.current);
+    }, hideDelay);
   }
 
   return (
@@ -174,6 +195,8 @@ export function Tooltip({
         {({ arrowProps, placement, ref, style }) =>
           showTooltip && (
             <div
+              onMouseEnter={onPopperMouseEnter}
+              onMouseLeave={onPopperMouseLeave}
               className={classNames(
                 'module-tooltip',
                 tooltipThemeClassName,

ts/util/lint/exceptions.json

@@ -3590,6 +3590,20 @@
     "reasonCategory": "usageTrusted",
     "updated": "2023-08-10T00:23:35.320Z"
   },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/Tooltip.tsx",
+    "line": "  const hideDelayTimeoutRef = useRef<NodeJS.Timeout | undefined>();",
+    "reasonCategory": "usageTrusted",
+    "updated": "2023-12-25T10:53:31.583Z"
+  },
+  {
+    "rule": "React-useRef",
+    "path": "ts/components/Tooltip.tsx",
+    "line": "  const popperDelayTimeoutRef = useRef<NodeJS.Timeout | undefined>();",
+    "reasonCategory": "usageTrusted",
+    "updated": "2023-12-25T10:53:31.583Z"
+  },
   {
     "rule": "React-createRef",
     "path": "ts/components/conversation/ConversationHeader.tsx",
@@ -3958,4 +3972,4 @@
     "reasonCategory": "usageTrusted",
     "updated": "2021-09-17T21:02:59.414Z"
   }
-]
+]