tanner/qotnews
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

feat: Add tooltips to browser navigation dots

Browse Source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Tanner Collin
2025-12-08 23:33:52 +00:00
parent a712ca12da
commit 60a4df2efc
2 changed files with 29 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
webclient/src/Style-light.css
View File

@@ -360,3 +360,28 @@ button.comment {
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(45deg); 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;
}

6
webclient/src/utils.js
View File

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