Skip to content

how to make tooltip initially open with uncontrolled state #1098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alondon17 opened this issue Oct 2, 2023 · 4 comments
Closed

how to make tooltip initially open with uncontrolled state #1098

alondon17 opened this issue Oct 2, 2023 · 4 comments
Labels

Comments

@alondon17
Copy link

If this is a bug or a Feature request reported using this template, we will close this issue, for those, please use the correct template.

This will be handled as a Question.

your docs are half usable, so many props that don't exist are listed there, we have need a system for menu tooltips to be loaded when their trigger is clicked for performance reasons. is there a prop for thatbecause setting isOpen to true disables things like the tooltip disappearing after click outside and after scroll

@gabrieljablonski
Copy link
Member

gabrieljablonski commented Oct 2, 2023

Hi @alondon17.

All of the props for v5 have a description listed on our docs page here, and we also have examples for a bunch of the most useful ones here.

You might be looking at the legacy v4 docs, which we still have listed since it used by a lot of people to this day (more than v5 even).


we have need a system for menu tooltips to be loaded when their trigger is clicked

Try using openOnClick.

@alondon17
Copy link
Author

i know about that prop, i meant we would like having an option for an initial state, while being uncontrolled, currently we had to replicate the click outside ourselves because the built in doesn't work with isOpen true

@gabrieljablonski
Copy link
Member

As you can see on #1036, we already have plans for an "imperative mode", which will allow you to do something like tooltipRef.current.open(). Until then, try the following example:

https://stackblitz.com/edit/stackblitz-starters-f8xebc?file=src%2FApp.tsx

In summary, when the component is first mounted, we trigger a mouseenter event on the anchor to show the tooltip.
If this is something you are trying to do in several places, I suggest writing a wrapper component for the tooltip, so you don't have to copy and paste this logic to multiple components.

@gabrieljablonski
Copy link
Member

I'll close the issue for now, but let us know if there's anything else.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants