Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Fix tooltips (#10154)

Browse Source 
* use portal for tooltips

* Fix tooltips for desktop and mobile nav bars

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
This commit is contained in:
Nicolas Mowen 2024-02-29 17:59:26 -07:00 committed by GitHub
parent e7f8bca2c3
commit dcc0886305
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/components/navigation/NavItem.tsx
View File

@ -6,6 +6,8 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { useState } from "react";
import { isDesktop } from "react-device-detect";
const variants = { const variants = {
primary: { primary: {
@ -39,9 +41,11 @@ export default function NavItem({
}: NavItemProps) { }: NavItemProps) {
const shouldRender = dev ? ENV !== "production" : true; const shouldRender = dev ? ENV !== "production" : true;
const [showTooltip, setShowTooltip] = useState(false);
return ( return (
shouldRender && ( shouldRender && (
<Tooltip> <Tooltip open={isDesktop && showTooltip}>
<NavLink <NavLink
to={url} to={url}
onClick={onClick} onClick={onClick}
@ -50,6 +54,8 @@ export default function NavItem({
variants[variant][isActive ? "active" : "inactive"] variants[variant][isActive ? "active" : "inactive"]
}` }`
} }
onMouseEnter={() => (isDesktop ? setShowTooltip(true) : null)}
onMouseLeave={() => (isDesktop ? setShowTooltip(false) : null)}
> >
<TooltipTrigger> <TooltipTrigger>
<Icon className="size-5 md:m-[6px]" /> <Icon className="size-5 md:m-[6px]" />