mirror of
https://github.com/tale/headplane.git
synced 2026-07-26 15:58:14 +00:00
Aarnav Tale
de07372427
The last row of the machines table opened tooltips below the trigger, where they got clipped by the viewport — the page could scroll to reveal them, but the popup was invisible on hover. Explicitly pin the side to top and add 8px of collision padding so the Base UI flip logic has enough room to keep the popup on-screen for last-row triggers. Closes #508 Amp-Thread-ID: https://ampcode.com/threads/T-019e7ae4-6862-760c-a3e7-239350eab71d Co-authored-by: Amp <amp@ampcode.com>
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
|
|
import type { ReactNode } from "react";
|
|
|
|
import cn from "~/utils/cn";
|
|
|
|
export interface TooltipProps {
|
|
children: ReactNode;
|
|
content: ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export default function Tooltip({ children, content, className }: TooltipProps) {
|
|
return (
|
|
<BaseTooltip.Root>
|
|
<BaseTooltip.Trigger
|
|
delay={0}
|
|
closeDelay={0}
|
|
className={cn(
|
|
"inline-flex items-center justify-center rounded-md",
|
|
"focus:outline-hidden focus:ring-2 focus:ring-indigo-500/40 focus:ring-offset-1",
|
|
"dark:focus:ring-indigo-400/40 dark:focus:ring-offset-mist-900",
|
|
)}
|
|
>
|
|
{children}
|
|
</BaseTooltip.Trigger>
|
|
<BaseTooltip.Portal>
|
|
<BaseTooltip.Positioner side="top" sideOffset={4} collisionPadding={8}>
|
|
<BaseTooltip.Popup
|
|
className={cn(
|
|
"z-50 rounded-lg p-3 text-sm w-48",
|
|
"outline-hidden",
|
|
"bg-white dark:bg-mist-950",
|
|
"text-black dark:text-white",
|
|
"shadow-overlay",
|
|
"border border-mist-100 dark:border-mist-800",
|
|
className,
|
|
)}
|
|
>
|
|
{content}
|
|
</BaseTooltip.Popup>
|
|
</BaseTooltip.Positioner>
|
|
</BaseTooltip.Portal>
|
|
</BaseTooltip.Root>
|
|
);
|
|
}
|