fix(console): remove hover state from tip button after tip is closed (#5197)

packages/console/src/ds-components/CopyToClipboard/index.tsx

@@ -70,6 +70,10 @@ function CopyToClipboard(
   }, []);
 
   const copy: MouseEventHandler<HTMLButtonElement> = async () => {
+    /**
+     * Note: should blur the copy icon button before the tooltip is shown, or it will remain focused after the tooltip is closed.
+     */
+    copyIconReference.current?.blur();
     setCopyState('copying');
     await navigator.clipboard.writeText(value);
     setCopyState('copied');

packages/console/src/ds-components/Tip/ToggleTip/index.tsx

@@ -41,6 +41,15 @@ function ToggleTip({
 
   const [isOpen, setIsOpen] = useState(false);
 
+  const openTip = useCallback(() => {
+    setIsOpen(true);
+    /**
+     * Note: should focus on the anchor wrapper element after the tip bubble is opened,
+     * or the hover state will not be removed from its child element, and this will cause the child element to have a hover state after the tip bubble is closed.
+     */
+    anchorRef.current?.focus();
+  }, []);
+
   const onClose = useCallback(() => {
     setIsOpen(false);
   }, [setIsOpen]);
@@ -67,12 +76,8 @@ function ToggleTip({
         role="tab"
         tabIndex={0}
         className={anchorClassName}
-        onClick={() => {
+        onClick={openTip}
-          setIsOpen(true);
+        onKeyDown={onKeyDownHandler(openTip)}
-        }}
-        onKeyDown={onKeyDownHandler(() => {
-          setIsOpen(true);
-        })}
       >
         {children}
       </div>