Support a popover like behavior for tooltips

[OgDev-01]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Currently working on a project and making use of the scatterplot chart. But discovered some limitations with the tooltip provided

• Tooltip can't be hovered on

https://user-images.githubusercontent.com/62995161/207777072-97967a39-3b3c-4507-b978-2164cc2df77c.mov

Describe the solution you'd like A clear and concise description of what you want to happen.

A behavior similar to GitHub hovercard where we can hiver on the tooltip itself

https://user-images.githubusercontent.com/62995161/207776852-7d605c29-e78c-459f-b99f-f5a1b83e2fde.mov

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

[bdougie]

Bump

[takanome-dev]

cc @plouc can this be achieved? Would be very happy to help with this if possible :smiley:

[plouc]

I think it's more the behavior of a popover, but it's definitely possible to implement this in the lib.

However @nivo/tooltip is a core component used for all charts, and we currently assume that the tooltip disappear on mouse leave, meaning that we would need to change all charts' event handlers.

@takanome-dev, if you want to give it a try, that would be great indeed :)

[plouc]

We would also need to introduce a new property to control this behavior.

[takanome-dev]

I think it's more the behavior of a popover, but it's definitely possible to implement this in the lib.

However @nivo/tooltip is a core component used for all charts, and we currently assume that the tooltip disappear on mouse leave, meaning that we would need to change all charts' event handlers.

@takanome-dev, if you want to give it a try, that would be great indeed :)

That sounds a lot :sweat_smile: Alright, I'm gonna give it a shot :+1:

We would also need to introduce a new property to control this behavior.

Can you elaborate more on that?

[plouc]

I mean that it might not be the expected behavior, tooltip VS popover, so for retro-compatibility, this should be an opt-in IMHO.

[plouc]

I think that a reasonable approach would be to start with a single chart (maybe the bar chart), before going all in and changing the numerous packages that nivo provides 😅.

[takanome-dev]

I agree with that :sweat_smile:

[plouc]

Also using a property and keeping the current behavior by default would allow us to gradually ship this feature.

[plouc]

I was having a look at the open sauced dashboard, and I understand why you want such feature 😄

[takanome-dev]

Yeah it would be pretty cool to have it 😃

[plouc]

Seems like a nice project btw, would you mind if I add it to the references?

[takanome-dev]

Seems like a nice project btw, would you mind if I add it to the references?

That would be great 😊 Thoughts @bdougie?

[plouc]

The references page is not that nice right now, just a list of bare links, but I plan to change that to include some screenshots, maybe something similar to https://nextjs.org/showcase or https://www.gatsbyjs.com/customers/.

[bdougie]

Seems like a nice project btw, would you mind if I add it to the references?

Yes, please do. Also thanks for the engaging discussion.

[plouc]

Thank you @bdougie and @takanome-dev!

[jasongerbes]

Has this idea been abandoned? I have a similar use case

[bdougie]

We actually figured out a work around in this PR https://github.com/open-sauced/app/pull/1266

@OgDev-01 can probably provide more context here.