From 18d4a268e2489f3caf5da149fdcf84b4edd6a07e Mon Sep 17 00:00:00 2001
From: TongZ <471205975@qq.com>
Date: Wed, 12 Mar 2025 11:25:21 +0800
Subject: [PATCH] Fix tooltip layer bug (#2189)

---
 .changeset/fifty-foxes-brake.md                 | 5 +++++
 webview-ui/src/components/chat/ChatTextArea.tsx | 1 +
 webview-ui/src/components/common/Tooltip.tsx    | 9 +++++----
 3 files changed, 11 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fifty-foxes-brake.md

diff --git a/.changeset/fifty-foxes-brake.md b/.changeset/fifty-foxes-brake.md
new file mode 100644
index 0000000000..f25b9de3e6
--- /dev/null
+++ b/.changeset/fifty-foxes-brake.md
@@ -0,0 +1,5 @@
+---
+"claude-dev": patch
+---
+
+Fix tooltip css layer bug
diff --git a/webview-ui/src/components/chat/ChatTextArea.tsx b/webview-ui/src/components/chat/ChatTextArea.tsx
index 11bc35f00f..b8fe14e18b 100644
--- a/webview-ui/src/components/chat/ChatTextArea.tsx
+++ b/webview-ui/src/components/chat/ChatTextArea.tsx
@@ -1132,6 +1132,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 						</ModelContainer>
 					</ButtonGroup>
 					<Tooltip
+						style={{ zIndex: 1000 }}
 						visible={shownTooltipMode !== null}
 						tipText={`In ${shownTooltipMode === "act" ? "Act" : "Plan"}  mode, Cline will ${shownTooltipMode === "act" ? "complete the task immediately" : "gather information to architect a plan"}`}
 						hintText={`Toggle w/ ${metaKeyChar}+Shift+A`}>
diff --git a/webview-ui/src/components/common/Tooltip.tsx b/webview-ui/src/components/common/Tooltip.tsx
index 595711fdff..19d3e6b255 100644
--- a/webview-ui/src/components/common/Tooltip.tsx
+++ b/webview-ui/src/components/common/Tooltip.tsx
@@ -13,10 +13,11 @@ interface TooltipProps {
 	hintText: string
 	tipText: string
 	children: React.ReactNode
+	style?: React.CSSProperties
 }
 
 // add styled component for tooltip
-const TooltipBody = styled.div`
+const TooltipBody = styled.div<Pick<TooltipProps, "style">>`
 	position: absolute;
 	background-color: ${getAsVar(VSC_SIDEBAR_BACKGROUND)};
 	color: ${getAsVar(VSC_DESCRIPTION_FOREGROUND)};
@@ -24,7 +25,7 @@ const TooltipBody = styled.div`
 	border-radius: 5px;
 	bottom: 100%;
 	left: -180%;
-	z-index: 10;
+	z-index: ${(props) => props.style?.zIndex ?? 10};
 	white-space: wrap;
 	max-width: 200px;
 	border: 1px solid ${getAsVar(VSC_INPUT_BORDER)};
@@ -39,12 +40,12 @@ const Hint = styled.div`
 	margin-top: 2px;
 `
 
-const Tooltip: React.FC<TooltipProps> = ({ visible, tipText, hintText, children }) => {
+const Tooltip: React.FC<TooltipProps> = ({ visible, tipText, hintText, children, style }) => {
 	return (
 		<div style={{ position: "relative", display: "inline-block" }}>
 			{children}
 			{visible && (
-				<TooltipBody>
+				<TooltipBody style={style}>
 					{tipText}
 					{hintText && <Hint>{hintText}</Hint>}
 				</TooltipBody>