[Tooltip + DropdownMenu] Tooltip hides and delayDuration property is ignored

[albermav]

Bug report

Current Behavior

When combining DropdownMenuItem and Tooltip using asChild, the delayDuration property is ignored. The tooltip also hides as soon as the mouse approaches.

demo.mp4

Expected behavior

The tooltip should appear after the configured number of seconds and it should not disappear while its hovered.

Reproducible example

CodeSandbox Template

Suggested solution

Probably controlling manually the visibility of the tooltip can be a workaround, but I don't think this is optimal.
Not sure what part of the code is affected, I've seen while debugging that instant-open property is set at the Tooltip.

Additional context

Maybe this also happen combining other primitives. I guess there is a strange behaviour combining DropdownMenuItem + Hover Card as well.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip, @radix-ui/react-dropdown-menu	1.0.3 / 2.0.2
React	n/a
Browser	Edge
Assistive tech
Node	n/a
npm/yarn
Operating System	Windows

[joaom00]

Actually I think it's behaving the right way..., when you hover the menu item you're focusing on it and making the tooltip open instantly.

You can see this same behavior if you focus the button with the keyboard in the documentation.

I've never seen a tooltip used together with a dropdown menu item 🤔

[albermav]

I was trying to do something similar to this in notion.

But i don't want the tooltip to appear immediately. Also I would like to put a link inside so I can click and navigate to other page. Not sure if Tooltip is the best primitive for this use case.

[joaom00]

Maybe a Popover would be better suited here? but you will have to implement delayed open yourself

[albermav]

I tried with Popover but it seems that to make it work it should be controller manually. HoverCard delay is working but the timer doesn't stop if you mouse out of the trigger, so it displays when it shouldn't

Here the demos: https://codesandbox.io/s/dreamy-williamson-hop03z?file=/App.js

[knubie]

Actually I think it's behaving the right way..., when you hover the menu item you're focusing on it and making the tooltip open instantly.

I think we need to distinguish between hovering and focusing here. Focusing something with the keyboard is not really the same as hovering over it with a mouse, and this behavior doesn't replicate in other components like buttons.

In other components focusing and hovering are two different states and exhibit different behavior (e.g. different styling, delay vs instant tooltip).

[joaom00]

Sorry I guess I wasn't clear, it's by design in the dropdown that when you hover over a menu item that menu item is focused and because of that the tooltip opens instantly

[knubie]

@joaom00 No, you were clear. My point was that in general, hovering does not cause UI elements to be focused (e.g. buttons), and so the intended design is unexpected and confusing.

[joaom00]

@knubie Ohh ok, so check this thread and this comment to understand why it's by design

[knubie]

The reason is that if you can have 2 "highlighted" styles triggered by 2 different modes (focus/hover) you can end up in situations where 2 items appear highlighted which becomes very confusing for the user as to which item is currently highlighted. It's hard to understand where it will go if I press arrow down.

I feel that this rationale could apply just as well to my example of buttons. Take the Alert Dialog component, or the Navigation Menu components for example.

[benoitgrelard]

This is functioning as intended because hover means focus for menu items.

[hashboard-charlie]

For anybody looking for a way to work around this behavior in future, you can kinda get a delayed tooltip inside of a dropdown working by applying CSS animations which reveals the tooltip only after a delay. Radix still instantly mounts the tooltip, but it only appears after a bit.

You'll probably want to wrap this in a component to apply the class names consistently, so it's kinda cumbersome, but it worked enough for us to get mostly unblocked on implementing a variant of the UX discussed in this issue.

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

[data-radix-menu-content] .TooltipContent {
  &.--delayed {
    &[data-state="instant-open"] {
      opacity: 0;
      animation-name: fade-in;
      animation-fill-mode: forwards;
      animation-delay: 500ms;
    }
    &[data-state="closed"] {
      opacity: 0 !important;
    }
  }
}