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

View File

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