feat: Added tooltips for navbar buttons to clear meaning of each one (#1636)

* feat: Added tooltips for navbar buttons to clear meaning of each one.

* update tooltips and fix linter errors

---------

Co-authored-by: henrygd <hank@henrygd.me>

internal/site/src/components/lang-toggle.tsx

@@ -1,21 +1,29 @@
-import { useLingui } from "@lingui/react/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
 import { LanguagesIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { dynamicActivate } from "@/lib/i18n"
 import languages from "@/lib/languages"
 import { cn } from "@/lib/utils"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
 
 export function LangToggle() {
 	const { i18n } = useLingui()
 
+	const LangTrans = <Trans>Language</Trans>
+
 	return (
 		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
+			<DropdownMenuTrigger>
+				<Tooltip>
+					<TooltipTrigger asChild>
 						<Button variant={"ghost"} size="icon" className="hidden sm:flex">
 							<LanguagesIcon className="absolute h-[1.2rem] w-[1.2rem] light:opacity-85" />
-					<span className="sr-only">Language</span>
+							<span className="sr-only">{LangTrans}</span>
 						</Button>
+					</TooltipTrigger>
+					<TooltipContent>{LangTrans}</TooltipContent>
+				</Tooltip>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent className="grid grid-cols-3">
 				{languages.map(([lang, label, e]) => (

internal/site/src/components/mode-toggle.tsx

@@ -2,11 +2,15 @@ import { t } from "@lingui/core/macro"
 import { MoonStarIcon, SunIcon } from "lucide-react"
 import { useTheme } from "@/components/theme-provider"
 import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
+import { Trans } from "@lingui/react/macro"
 
 export function ModeToggle() {
 	const { theme, setTheme } = useTheme()
 
 	return (
+		<Tooltip>
+			<TooltipTrigger>
 				<Button
 					variant={"ghost"}
 					size="icon"
@@ -16,5 +20,10 @@ export function ModeToggle() {
 					<SunIcon className="h-[1.2rem] w-[1.2rem] transition-all -rotate-90 dark:opacity-0 dark:rotate-0" />
 					<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] transition-all opacity-0 -rotate-90 dark:opacity-100 dark:rotate-0" />
 				</Button>
+			</TooltipTrigger>
+			<TooltipContent>
+				<Trans>Toggle theme</Trans>
+			</TooltipContent>
+		</Tooltip>
 	)
 }

internal/site/src/components/navbar.tsx

@@ -30,7 +30,7 @@ import { LangToggle } from "./lang-toggle"
 import { Logo } from "./logo"
 import { ModeToggle } from "./mode-toggle"
 import { $router, basePath, Link, prependBasePath } from "./router"
-import { t } from "@lingui/core/macro"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip"
 
 const CommandPalette = lazy(() => import("./command-palette"))
 
@@ -49,7 +49,10 @@ export default function Navbar() {
 			</Link>
 			<SearchButton />
 
+			{/** biome-ignore lint/a11y/noStaticElementInteractions: ignore */}
 			<div className="flex items-center ms-auto" onMouseEnter={() => import("@/components/routes/settings/general")}>
+				<Tooltip>
+					<TooltipTrigger asChild>
 						<Link
 							href={getPagePath($router, "containers")}
 							className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}
@@ -57,6 +60,13 @@ export default function Navbar() {
 						>
 							<ContainerIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
 						</Link>
+					</TooltipTrigger>
+					<TooltipContent>
+						<Trans>All Containers</Trans>
+					</TooltipContent>
+				</Tooltip>
+				<Tooltip>
+					<TooltipTrigger asChild>
 						<Link
 							href={getPagePath($router, "smart")}
 							className={cn("hidden md:grid", buttonVariants({ variant: "ghost", size: "icon" }))}
@@ -64,8 +74,15 @@ export default function Navbar() {
 						>
 							<HardDriveIcon className="h-[1.2rem] w-[1.2rem]" strokeWidth={1.5} />
 						</Link>
+					</TooltipTrigger>
+					<TooltipContent>
+						<Trans>S.M.A.R.T.</Trans>
+					</TooltipContent>
+				</Tooltip>
 				<LangToggle />
 				<ModeToggle />
+				<Tooltip>
+					<TooltipTrigger asChild>
 						<Link
 							href={getPagePath($router, "settings", { name: "general" })}
 							aria-label="Settings"
@@ -73,6 +90,11 @@ export default function Navbar() {
 						>
 							<SettingsIcon className="h-[1.2rem] w-[1.2rem]" />
 						</Link>
+					</TooltipTrigger>
+					<TooltipContent>
+						<Trans>Settings</Trans>
+					</TooltipContent>
+				</Tooltip>
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<button aria-label="User Actions" className={cn(buttonVariants({ variant: "ghost", size: "icon" }))}>
@@ -135,15 +157,15 @@ export default function Navbar() {
 	)
 }
 
-function SearchButton() {
-	const [open, setOpen] = useState(false)
-
 const Kbd = ({ children }: { children: React.ReactNode }) => (
 	<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
 		{children}
 	</kbd>
 )
 
+function SearchButton() {
+	const [open, setOpen] = useState(false)
+
 	return (
 		<>
 			<Button

internal/site/src/components/routes/system/info-bar.tsx

@@ -17,7 +17,7 @@ import { Button } from "@/components/ui/button"
 import { Card } from "@/components/ui/card"
 import { FreeBsdIcon, TuxIcon, WebSocketIcon, WindowsIcon } from "@/components/ui/icons"
 import { Separator } from "@/components/ui/separator"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { ConnectionType, connectionTypeLabels, Os, SystemStatus } from "@/lib/enums"
 import { cn, formatBytes, getHostDisplayValue, secondsToString, toFixedFloat } from "@/lib/utils"
 import type { ChartData, SystemDetailsRecord, SystemRecord } from "@/types"
@@ -135,7 +135,6 @@ export default function InfoBar({
 				<div>
 					<h1 className="text-[1.6rem] font-semibold mb-1.5">{system.name}</h1>
 					<div className="flex flex-wrap items-center gap-3 gap-y-2 text-sm opacity-90">
-						<TooltipProvider>
 						<Tooltip>
 							<TooltipTrigger asChild>
 								<div className="capitalize flex gap-2 items-center">
@@ -171,7 +170,6 @@ export default function InfoBar({
 								</TooltipContent>
 							)}
 						</Tooltip>
-						</TooltipProvider>
 
 						{systemInfo.map(({ value, label, Icon, hide }) => {
 							if (hide || !value) {
@@ -186,12 +184,10 @@ export default function InfoBar({
 								<div key={value} className="contents">
 									<Separator orientation="vertical" className="h-4 bg-primary/30" />
 									{label ? (
-										<TooltipProvider>
-											<Tooltip delayDuration={150}>
+										<Tooltip delayDuration={100}>
 											<TooltipTrigger asChild>{content}</TooltipTrigger>
 											<TooltipContent>{label}</TooltipContent>
 										</Tooltip>
-										</TooltipProvider>
 									) : (
 										content
 									)}
@@ -202,7 +198,6 @@ export default function InfoBar({
 				</div>
 				<div className="xl:ms-auto flex items-center gap-2 max-sm:-mb-1">
 					<ChartTimeSelect className="w-full xl:w-40" agentVersion={chartData.agentVersion} />
-					<TooltipProvider delayDuration={100}>
 					<Tooltip>
 						<TooltipTrigger asChild>
 							<Button
@@ -221,7 +216,6 @@ export default function InfoBar({
 						</TooltipTrigger>
 						<TooltipContent>{t`Toggle grid`}</TooltipContent>
 					</Tooltip>
-					</TooltipProvider>
 				</div>
 			</div>
 		</Card>

internal/site/src/components/ui/input-copy.tsx

@@ -3,7 +3,7 @@ import { CopyIcon } from "lucide-react"
 import { copyToClipboard } from "@/lib/utils"
 import { Button } from "./button"
 import { Input } from "./input"
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip"
 
 export function InputCopy({ value, id, name }: { value: string; id: string; name: string }) {
 	return (
@@ -14,7 +14,6 @@ export function InputCopy({ value, id, name }: { value: string; id: string; name
 					"h-6 w-24 bg-linear-to-r rtl:bg-linear-to-l from-transparent to-background to-65% absolute top-2 end-1 pointer-events-none"
 				}
 			></div>
-			<TooltipProvider delayDuration={100} disableHoverableContent>
 			<Tooltip disableHoverableContent={true}>
 				<TooltipTrigger asChild>
 					<Button
@@ -32,7 +31,6 @@ export function InputCopy({ value, id, name }: { value: string; id: string; name
 					</p>
 				</TooltipContent>
 			</Tooltip>
-			</TooltipProvider>
 		</div>
 	)
 }

internal/site/src/components/ui/tooltip.tsx

@@ -3,7 +3,7 @@ import type * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+function TooltipProvider({ delayDuration = 50, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
 	return <TooltipPrimitive.Provider data-slot="tooltip-provider" delayDuration={delayDuration} {...props} />
 }