mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-04-19 11:11:05 -05:00
Code Issues Packages Projects Releases 162 Wiki Activity

fix(tooltip): wrap TooltipContent in a Portal for improved rendering

Browse Source
This commit is contained in:
ompharate
2025-08-22 19:36:25 +05:30
parent a3764f0316
commit f6c91540e3
2 changed files with 20 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/responses/components/ResponseTableColumns.tsx
View File

@@ -284,13 +284,15 @@ export const generateResponseTableColumns = (
<CircleHelpIcon className="h-3 w-3 text-slate-500" strokeWidth={1.5} />
</TooltipTrigger>
<TooltipContent side="bottom" className="font-normal">
{t("environments.surveys.responses.how_to_identify_users")}
<Link
className="underline underline-offset-2 hover:text-slate-900"
href="https://formbricks.com/docs/app-surveys/user-identification"
target="_blank">
{t("common.app_survey")}
</Link>
<div className="space-y-2">
<p>{t("environments.surveys.responses.how_to_identify_users") || "How to identify users"}</p>
<Link
className="text-blue-600 underline underline-offset-2 hover:text-slate-900"
href="https://formbricks.com/docs/app-surveys/user-identification"
target="_blank">
{t("common.learn_more") || "Learn more"}
</Link>
</div>
</TooltipContent>
</Tooltip>
</TooltipProvider>

20
apps/web/modules/ui/components/tooltip/index.tsx
View File

@@ -18,15 +18,17 @@ const TooltipContent: React.ComponentType<TooltipPrimitive.TooltipContentProps>
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md",
className
)}
{...props}
/>
<TooltipPrimitive.Portal>
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"animate-in fade-in-50 data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 z-50 overflow-hidden rounded-md border border-slate-100 bg-white px-3 py-1.5 text-sm text-slate-700 shadow-md",
className
)}
{...props}
/>
</TooltipPrimitive.Portal>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;