use portal for tooltips

This commit is contained in:
Josh Hawkins 2024-02-29 09:15:03 -06:00 committed by Nicolas Mowen
parent cb30450060
commit 46e4004cf6
2 changed files with 17 additions and 9 deletions

View File

@ -6,6 +6,7 @@ import {
TooltipContent, TooltipContent,
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import { TooltipPortal } from "@radix-ui/react-tooltip";
const variants = { const variants = {
primary: { primary: {
@ -54,10 +55,12 @@ export default function NavItem({
<TooltipTrigger> <TooltipTrigger>
<Icon className="size-5 md:m-[6px]" /> <Icon className="size-5 md:m-[6px]" />
</TooltipTrigger> </TooltipTrigger>
</NavLink> <TooltipPortal>
<TooltipContent side="right"> <TooltipContent side="right">
<p>{title}</p> <p>{title}</p>
</TooltipContent> </TooltipContent>
</TooltipPortal>
</NavLink>
</Tooltip> </Tooltip>
) )
); );

View File

@ -58,6 +58,7 @@ import {
TooltipTrigger, TooltipTrigger,
} from "@/components/ui/tooltip"; } from "@/components/ui/tooltip";
import ActivityIndicator from "../ui/activity-indicator"; import ActivityIndicator from "../ui/activity-indicator";
import { TooltipPortal } from "@radix-ui/react-tooltip";
type SettingsNavItemsProps = { type SettingsNavItemsProps = {
className?: string; className?: string;
@ -106,9 +107,11 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
<LuSettings /> <LuSettings />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right"> <TooltipContent side="right">
<p>Settings</p> <p>Settings</p>
</TooltipContent> </TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</a> </a>
</DropdownMenuTrigger> </DropdownMenuTrigger>
@ -249,9 +252,11 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
<VscAccount /> <VscAccount />
</Button> </Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipPortal>
<TooltipContent side="right"> <TooltipContent side="right">
<p>Account</p> <p>Account</p>
</TooltipContent> </TooltipContent>
</TooltipPortal>
</Tooltip> </Tooltip>
</div> </div>
{restartDialogOpen && ( {restartDialogOpen && (