Add tooltips

Automattic · Feb 19, 2024 · 9e76648 · 9e76648
1 parent c325b74
commit 9e76648
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/client/layout/global-sidebar/footer.tsx b/client/layout/global-sidebar/footer.tsx
@@ -31,10 +31,20 @@ export const GlobalSidebarFooter: FC< {
 } > = ( { translate, user } ) => {
 	return (
 		<SidebarFooter>
-			<a href="/read" className="sidebar__footer-link" title={ translate( 'Reader' ) }>
+			<a
+				href="/read"
+				className="sidebar__footer-link tooltip tooltip-bottom"
+				title={ translate( 'Reader' ) }
+				data-tooltip={ translate( 'Reader' ) }
+			>
 				<CustomReaderIcon />
 			</a>
-			<a href="/me" className="sidebar__footer-link" title={ translate( 'Profile' ) }>
+			<a
+				href="/me"
+				className="sidebar__footer-link tooltip tooltip-bottom"
+				title={ translate( 'Profile' ) }
+				data-tooltip={ translate( 'Profile' ) }
+			>
 				<Gravatar user={ user } size={ 20 } imgSize={ 20 } />
 			</a>
 			<AsyncLoad

diff --git a/client/layout/global-sidebar/style.scss b/client/layout/global-sidebar/style.scss
@@ -145,6 +145,7 @@
 			align-items: center;
 			margin-left: 20px;
 			height: 40px;
+			cursor: pointer;
 			svg {
 				fill: var(--studio-white);
 			}