feat: Add tooltips to browser navigation dots

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>

webclient/src/Style-light.css

@@ -360,3 +360,28 @@ button.comment {
 	border-width: 0 2px 2px 0;
 	transform: rotate(45deg);
 }
+
+.tooltip .tooltiptext {
+	visibility: hidden;
+	width: 140px;
+	background-color: #555;
+	color: #fff;
+	text-align: center;
+	border-radius: 6px;
+	padding: 5px 0;
+	position: absolute;
+	z-index: 1;
+	bottom: 110%;
+	left: 50%;
+	margin-left: -70px;
+	opacity: 0;
+	transition: opacity 0.2s;
+	font-size: 0.9rem;
+	line-height: 1.3;
+}
+
+.tooltip:hover .tooltiptext,
+.tooltip:active .tooltiptext {
+	visibility: visible;
+	opacity: 1;
+}

webclient/src/utils.js

@@ -42,10 +42,11 @@ export const BackwardDot = () => {
 	if (!document.fullscreenElement) return null;
 
 	return (
-		<div className='dot backwardDot' onClick={goBackward}>
+		<div className='dot backwardDot tooltip' onClick={goBackward}>
 			<div className='button'>
 				
 			</div>
+			<span className="tooltiptext">Browser Back</span>
 		</div>
 	);
 };
@@ -60,10 +61,11 @@ export const ForwardDot = () => {
 	if (!isMobile) return null;
 
 	return (
-		<div className='dot forwardDot' onClick={goForward}>
+		<div className='dot forwardDot tooltip' onClick={goForward}>
 			<div className='button'>
 				
 			</div>
+			<span className="tooltiptext">Browser Forward</span>
 		</div>
 	);
 };