Tooltip onOpenChange is not syncing the open value correctly

[p10ns11y]

It make sense that onOpenChange is not called during initial render
Can you clarify if I am right that I expect the onOpenChange should be called with the current value of open during state update

Here is the example codesandbox.

In the example, I am trying to implement tooltip with click event without two much tweaks and I expect the state open's value is correct in the onOpenChange callback and it is not. I suspect other default pointer events are somehow blocking or causing state syncing broken.

• onOpenChange is called with true on initial hover (should all pointer events prevented?)
• Further clicks toggles the tooltip as expected (toggles between open and close) (visibly works)
• onOpenChange never called with true anymore even when the state open become true (internal state sync is still an issue)

Also wondering, what is the use case of onOpenChange, ideally one could sync react state open in useEffect. Does onOpenChange to make sure not letting the developer to manage such side effects and rather keep it predictable callback

[benoitgrelard]

That sandbox doesn't work so I'm not able to see what you mean.

[benoitgrelard]

This is probably related to what you are asking, see my answer there it might explain things: #2195 (comment)

[p10ns11y]

Sorry about the link @benoitgrelard , it was private before and now it can be accessed.
I have previously checked the comment #2195 (comment).
The issue I am reporting is different here and it is not about onOpenChange is not being called initially.
It is about the value of open is not reflecting tooltip's actual visibility when using controlled props.

[benoitgrelard]

Why are you trying to open the tooltip on click rather than its normal behaviour?

[p10ns11y]

@benoitgrelard Use case is to use it in mobile devices (I am aware that it is better to avoid tooltips in mobile devices). Feel free to suggest any other alternative UI/UX solutions

[p10ns11y]

Used ChatGPT to figured out some alternatives

Is Toggle section is good alternative?

ChatGPT
Yes, toggle sections can be a good alternative to tooltips in certain contexts, especially on mobile or touch devices. Here's why:

Visibility and Accessibility: Toggle sections provide a more visible and accessible way to present additional information compared to tooltips, which often require a hover action. Users can easily see and interact with toggle sections, making them more intuitive, especially on touch-based devices.

Content Presentation: Toggle sections allow for the presentation of more extensive content or details in a structured and organized manner. Users can expand or collapse the section to access the information they need, providing a more comprehensive understanding of the content.

Consistency and Predictability: Toggle sections typically behave consistently across different devices and platforms, ensuring a predictable user experience. Unlike tooltips, which may behave differently based on the device or browser, toggle sections offer greater consistency in functionality and interaction.

Contextual Relevance: Toggle sections can be strategically placed within the interface to provide relevant information in context. Users can expand the section to access additional details or explanations related to the content they are viewing, enhancing their understanding and engagement.

Accessibility: Toggle sections can be designed to be accessible to users with disabilities, such as screen readers or keyboard navigation, ensuring equal access to information for all users.

While toggle sections offer several advantages as an alternative to tooltips, it's essential to consider the specific needs of the application or website and the preferences of the target audience. Depending on the context and content requirements, tooltips, toggle sections, or a combination of both may be the most suitable choice for enhancing the user experience on mobile or touch devices.

---

context: tooltips on popups in mobile devices
Now which alternative is most suitable

Given the context of tooltips on popups in mobile devices, the most suitable alternative depends on various factors such as the complexity of the content, user preferences, and the design constraints of the application or website. Here are some alternative approaches that may be more appropriate:

Inline Help Text within Popups: Instead of using tooltips, consider incorporating brief descriptions or explanations directly within the popups. This approach ensures that users can access relevant information without relying on hover interactions, making it more compatible with mobile devices.

Progressive Disclosure within Popups: Implement progressive disclosure techniques within popups to gradually reveal information or options as users interact with them. Start with essential content or actions and provide options to access more detailed information or advanced features as needed.

Embedded Videos or Demos within Popups: Include embedded videos or interactive demos within popups to demonstrate how to use specific features or accomplish tasks. Videos and demos provide visual guidance and can be particularly effective in engaging users within the context of popups.

Contextual Menus within Popups: Integrate contextual menus within popups to offer additional options or actions relevant to the content or functionality presented. Contextual menus allow users to access relevant commands quickly without cluttering the popup interface.

User Feedback and Support Options within Popups: Provide options for users to access help, support, or feedback mechanisms directly within the popups. This ensures that users can seek assistance or provide feedback without navigating away from the context of the popup.

[benoitgrelard]

Yeah I suspected it would be something like that. That's definitely something we don't recommend, typically a tooltip is placed over a "tool" which is typically a button, so putting the tooltip on click doesn't make sense as that's generally what triggers the action too (negating the point of having a tooltip). In these cases we generally recommend a popover with a little icon button as a trigger.