Skip to content

[FEAT REQ]: Indicate the actual place where tooltip is rendered in some way #969

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
binomialstew opened this issue Mar 6, 2023 · 4 comments · Fixed by #970
Closed

[FEAT REQ]: Indicate the actual place where tooltip is rendered in some way #969

binomialstew opened this issue Mar 6, 2023 · 4 comments · Fixed by #970

Comments

@binomialstew
Copy link

binomialstew commented Mar 6, 2023

Is your feature request related to a problem? Please describe.
I have a similar need to this feature request, but I don't think there have been any changes made related to it before it was closed.

I can use the place prop that is being set on the tooltip in my styling to "track" the place that is being set, but the place I am setting is not always respected. For example, if I have set place="top", but there is no room at the top of the anchor element, the tooltip is positioned at the bottom of the anchor element. I can see why this is done, but the styling I have depending on place has no knowledge of the placement being different than the prop value, so the styling used is different than what it should be for the actual placement when it differs from the set value.

From the place prop description: Position relative to the anchor element where the tooltip will be rendered (if possible). The "if possible" part is what makes it impossible to use the same value for place in my implementation of this tooltip.

Describe the solution you'd like
Can we expose the place context or apply classNames to the tooltip to reflect the actual placement used?

Additional context
I am adding a border to the arrow shape and need to use the placement to determine what sides of the border should be set to none in order to only show a border around the outer edge.

@gabrieljablonski
Copy link
Member

This is definitely extremely useful, and quite easy to implement.

Try out the beta release for #970 with yarn add [email protected] and let us know if it works as expected.

@gabrieljablonski
Copy link
Member

gabrieljablonski commented Mar 6, 2023

Forgot to mention, since exposing the actual placement with a callback or something else would be a lot more cumbersome, I went with setting the wrapper with the following classes:

.react-tooltip__place-top 
.react-tooltip__place-right
.react-tooltip__place-bottom
.react-tooltip__place-left

@binomialstew
Copy link
Author

Beautiful! It works great for me.

@gabrieljablonski
Copy link
Member

I'll leave this open until we merge the PR.

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

Successfully merging a pull request may close this issue.

2 participants