How to use tooltip and dropdown together?

[braidenstiller]

I am using shadcdn/svelte for examples sake but imagine the following:

<DropdownMenu.Root>
    <DropdownMenu.Trigger asChild let:builder={dropdownBuilder}>
        <Tooltip.Root>
            <Tooltip.Trigger asChild let:builder={tooltipBuilder}>
                <Button
                    variant="ghost"
                    builders={[dropdownBuilder, tooltipBuilder]}
                    size="icon"
                    class="relative h-8 w-8 p-0"
                >
                    <span class="sr-only">Open menu</span>
                    <Ellipsis class="h-4 w-4" />
                </Button>
            </Tooltip.Trigger>
            <Tooltip.Content>
                <p>Actions</p>
            </Tooltip.Content>
        </Tooltip.Root>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content>
        <DropdownMenu.Group>
            <DropdownMenu.Label>Actions</DropdownMenu.Label>
            <DropdownMenu.Item>
                Copy payment ID
            </DropdownMenu.Item>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Item>View customer</DropdownMenu.Item>
        <DropdownMenu.Item>View payment details</DropdownMenu.Item>
    </DropdownMenu.Content>
</DropdownMenu.Root>

This works relatively fine, however if you click on the button, before the tooltip show, then close off the dropdown by clicking the background, the tooltip then shows as if you were hovering over it again after a small delay.

What's interesting is it is not consistent - Im guessing because there is some collision happening with the render delegations between the two components?

[braidenstiller]

I solved this with a parent div acting as the render delegate for the tooltip, but I am not sure if this is optimal / best practice.

[shyakadavis]

Hi;

Not sure if I got the question right, but you could try setting the openDelay prop on your Tooltip.Root to a small value like 100 or just 0.