-
I'm trying to add a tooltip to a button that triggers an alert. I'm using If I use Does anyone have any suggestions on having a single button and getting it working? Warning
Codeimport React from "react";
import { Button } from "@/components/ui/button.tsx";
import { RotateCw } from "lucide-react";
import { cn } from "@/lib/utils";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip.tsx";
import { TooltipPortal } from "@radix-ui/react-tooltip";
export const ActionButton = React.forwardRef<
HTMLButtonElement,
{
title: string;
onConfirm: () => void;
isPending: boolean;
confirmationDescription?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>
>(
(
{ title, onConfirm, isPending, confirmationDescription, ...props },
forwardedRef,
) => {
const element = (
<Button
variant="secondary"
ref={forwardedRef}
className={cn(
props.className,
"flex items-center justify-between px-3 py-2",
)}
{...props}
>
{title}
{isPending && <RotateCw className="w-4 animate-spin" />}
</Button>
);
const withTooltip = (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>{element}</TooltipTrigger>
<TooltipPortal>
<TooltipContent side={"top"}>
<p>{props["aria-label"]}</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
</TooltipProvider>
);
const withAlertDialog = (
<AlertDialog>
<AlertDialogTrigger asChild>{withTooltip}</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{props["aria-label"]}?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction aria-label="Continue" onClick={onConfirm}>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
return withAlertDialog;
},
); |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
Following https://www.radix-ui.com/primitives/docs/guides/composition, I ended up with: import React from "react";
import { Button } from "@/components/ui/button.tsx";
import { RotateCw } from "lucide-react";
import { cn } from "@/lib/utils";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogPortal,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip.tsx";
import { TooltipPortal } from "@radix-ui/react-tooltip";
export const ActionButton = React.forwardRef<
HTMLButtonElement,
{
title: string;
onConfirm: () => void;
isPending: boolean;
confirmationDescription?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement>
>(
(
{ title, onConfirm, isPending, confirmationDescription, ...props },
forwardedRef,
) => {
return (
<TooltipProvider>
<AlertDialog>
<Tooltip>
<TooltipTrigger asChild>
<AlertDialogTrigger asChild>
<Button
variant="secondary"
ref={forwardedRef}
className={cn(
props.className,
"flex items-center justify-between px-3 py-2",
)}
{...props}
>
{title}
{isPending && <RotateCw className="w-4 animate-spin" />}
</Button>
</AlertDialogTrigger>
</TooltipTrigger>
<TooltipPortal>
<TooltipContent side={"top"}>
<p>{props["aria-label"]}</p>
</TooltipContent>
</TooltipPortal>
</Tooltip>
<AlertDialogPortal>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>{props["aria-label"]}?</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction aria-label="Continue" onClick={onConfirm}>
Continue
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogPortal>
</AlertDialog>
</TooltipProvider>
);
},
); |
Beta Was this translation helpful? Give feedback.
Following https://www.radix-ui.com/primitives/docs/guides/composition, I ended up with: