How create dialog trigger with tooltip?

[its-monotype]

<Dialog>
  <DialogTrigger asChild>
     <Tooltip content="tooltip content">
       <button>Button</button>
     </Tooltip>
  </DialogTrigger>
  <DialogContent>Dialog Content</DialogContent>
</Dialog>

this code results in an error

[benoitgrelard]

Hi @youngtype,

When you use asChild on a part it will use the direct child of that part as the element to render.
In your case it looks like you've created an abstraction around the Tooltip primitive.
It sounds like you haven't forwarded ref in that abstraction.
Either way, you want to make sure the direct child is the button, so you probably need to do something like this:

<Dialog>
  <Tooltip content="tooltip content">
    <DialogTrigger asChild>
      <button>Button</button>
    </DialogTrigger>
  </Tooltip>
  <DialogContent>Dialog Content</DialogContent>
</Dialog>

Hope that makes sense.

[graemen16]

Thanks, @gdrxn. Indeed, I noticed the tooltip showing after the dialog closes but didn't track down why. Moving the dialog trigger to be a child of the button resolves this.

[Alex-Mastin]

The above works, but I was only able to trigger the dialog by clicking on the icon rather than the entire button.

You can fix this by adding h-full w-full to the <span> (or whatever wraps the icon), like so:

<Button
  variant="outline"
  size="icon"
  className="h-11 w-11 rounded-full"
>
  <DialogTrigger asChild>
    <span className="flex items-center justify-center h-full w-full">
      <PencilIcon className="h-5 w-5" />
    </span>
  </DialogTrigger>
</Button>

[yaralahruthik]

@Alex-Mastin @gdrxn But keyboard accessibility is lost!

The below solution is better, you at least get the accessibility to enter the modal, on closing the modal, the focus is back to square one.

<Dialog>
      <Tooltip title="Report Bug">
        <DialogTrigger asChild>
          <Button size="icon" className="rounded-t-none">
            <BugIcon />
            <VisuallyHidden>Report Bug</VisuallyHidden>
          </Button>
        </DialogTrigger>
      </Tooltip>
      <DialogContent onCloseAutoFocus={(e) => e.preventDefault()}> // This helps in not focusing on the trigger after closing the modal
        <DialogHeader>
          <DialogTitle>Report Bug</DialogTitle>
          <DialogDescription>
            What went wrong? Kindly provide as much detail as possible. No need
            to attach the code, the workspace details are sent automatically!
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-2 py-1">
          <Label htmlFor="description">Description</Label>
          <Textarea
            id="description"
            placeholder="Kindly provide as much detail as possible!"
          />
        </div>
        <DialogFooter>
          <Button type="submit">Submit</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>

[adaptive-shield-matrix]

@yaralahruthik Your solution does not work since its missing the TooltipTrigger

[yaralahruthik]

@adaptive-shield-matrix I abstracted all that to use a simpler API.

'use client';

import * as React from 'react';
import * as TooltipPrimitive from '@radix-ui/react-tooltip';

import { cn } from '@/lib/utils';

const TooltipProvider = TooltipPrimitive.Provider;

const TooltipRoot = TooltipPrimitive.Root;

const TooltipTrigger = TooltipPrimitive.Trigger;

const TooltipContent = React.forwardRef<
  React.ElementRef<typeof TooltipPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
  <TooltipPrimitive.Content
    ref={ref}
    sideOffset={sideOffset}
    className={cn(
      'z-[100] overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
      className,
    )}
    {...props}
  />
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;

interface Props {
  title: React.ReactNode;
  children: React.ReactNode;
}

export default function Tooltip({ title, children }: Props) {
  return (
    <TooltipProvider delayDuration={0}>
      <TooltipRoot>
        <TooltipTrigger asChild>{children}</TooltipTrigger>
        <TooltipContent className="z-[200]">{title}</TooltipContent>
      </TooltipRoot>
    </TooltipProvider>
  );
}

[DevDeepakBhattarai]

These solution work , but when closing the modal. The tooltip is reopened again has anybody found a solution to that ?

[carloslfu]

I resorted to using a controlled Dialog like <Dialog open={isOpen} onOpenChange={setIsOpen}> instead of a <DialogTrigger> for this case.