Fix call react button lingering tooltip

stylesheets/components/CallControls.scss

@@ -110,10 +110,6 @@
   margin-block: -5px;
 }
 
-.CallControls__ReactButtonContainer--menu-shown .module-tooltip {
-  opacity: 0;
-}
-
 .CallControls__OuterSpacer {
   // Defined in _modules but duplicated here for ease of refactor
   $local-preview-width: 108px;

ts/components/CallingButton.tsx

@@ -111,34 +111,42 @@ export function CallingButton({
     tooltipContent = i18n('icu:CallingButton--more-options');
   }
 
+  const buttonContent = (
+    <button
+      aria-label={tooltipContent}
+      className={classNames(
+        'CallingButton__icon',
+        `CallingButton__icon--${classNameSuffix}`
+      )}
+      disabled={disabled}
+      id={uniqueButtonId}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      type="button"
+    >
+      <div />
+    </button>
+  );
+
   return (
     <div className="CallingButton">
-      <Tooltip
+      {tooltipContent === '' ? (
-        className="CallingButton__tooltip"
+        <div className="CallingButton__button-container">{buttonContent}</div>
-        wrapperClassName={classNames(
+      ) : (
-          'CallingButton__button-container',
+        <Tooltip
-          !isVisible && 'CallingButton__button-container--hidden'
+          className="CallingButton__tooltip"
-        )}
+          wrapperClassName={classNames(
-        content={tooltipContent}
+            'CallingButton__button-container',
-        direction={tooltipDirection}
+            !isVisible && 'CallingButton__button-container--hidden'
-        theme={Theme.Dark}
-      >
-        <button
-          aria-label={tooltipContent}
-          className={classNames(
-            'CallingButton__icon',
-            `CallingButton__icon--${classNameSuffix}`
           )}
-          disabled={disabled}
+          content={tooltipContent}
-          id={uniqueButtonId}
+          direction={tooltipDirection}
-          onClick={onClick}
+          theme={Theme.Dark}
-          onMouseEnter={onMouseEnter}
-          onMouseLeave={onMouseLeave}
-          type="button"
         >
-          <div />
+          {buttonContent}
-        </button>
+        </Tooltip>
-      </Tooltip>
+      )}
     </div>
   );
 }