Victory: Implement victory-tooltip

[coopy]

Requirements:

• similar to label in that tooltips get positioned by their parents and are provided with data
• should be positioned above other components (react-gateway? react-portal?)
• should have some automatic events like hover
• Integration into parents should be flexible i.e. should be able to pass custom tooltip components.

[thochi]

+1

[joanllenas]

+1

[coopy]

If we're going to be rendering the tooltip outside of the svg context, react-gateway may be of interest.

[hourliert]

:+1: Would love to see this.

[azazdeaz]

Hi,
I think it could be helpful to have a callback function like onMouseHoverData={({mouseX, mouseY, values=[...]}) => {...}} as a low level api, so we can implement some custom tooltips.

[luisrudge]

is there any work being done with this?

[boygirl]

@luisrudge yes. There is work going on in victory to support event handling generally, and @dandelany I believe is working on a specific tooltip component.

[mariussoutier]

:+1: Only thing holding me back from using Victory right now :)

[luisrudge]

Awesooooooome. Thanks everyone.

[boygirl]

Requirements:

• similar to label in that tooltips get positioned by their parents and are provided with data
• should be positioned above other components (react-gateway? react-portal?)
• should have some automatic events like hover
• Integration into parents should be flexible i.e. should be able to pass custom tooltip components.

[rbvea]

:+1:

[boygirl]

@dandelany has kindly shared some of his tooltip implementations that we might reference.

https://gist.github.com/dandelany/bd2fc7d9af96d50b53dd

https://github.com/dandelany/vector-toy/blob/master/src/components/SimpleTooltip.jsx

https://github.com/dandelany/vector-toy/blob/master/src/components/TippedComponent.jsx

[shantp]

Agree with others about passing a custom component for tooltip being nice.

Would also be nice if tooltip had an optional "crosshairs" attribute for adding a line on x and/or y axis that would point to hovered data point from the axis. If this is outside scope, maybe a separate victory component for this.

[knowbody]

The folks at recharts done this already, maybe worth iterating on their work or getting some ideas, see: https://github.com/recharts/recharts/blob/master/src/component/Tooltip.js

seems to work pretty well.

[syrusakbary]

Any updates on this? :)

[boygirl]

This will be in the next release!

[thedrew12]

👍

[boygirl]

This is getting pushed back on more release (mid June). Sorry everyone! This release (today) will have support for controlling events between Victory Components, so the pieces are all in place for a flexible tooltip implementation. For a quick fix, you should be able to create tooltips scoped to a single Victory Component with the current event system and custom label components.

[syrusakbary]

Thanks for the update @boygirl.
I've been using Victory but tooltips are not very easy to implement as of how the code is structured (or was structured).
Could you provide a simple example implementation for having tooltips scoped to a Victory component?

[boygirl]

@syrusakbary so long as you don't _also_ need labels you can pass in a custom labelComponent and trigger events as you would on label. I'll get some examples up next week.

[tquetano-r7]

@boygirl I would be interested in examples as well, the exact scenario you describe (where you don't need labels but need tooltips) is what I am hoping to attain.

[shantp]

You can use a d3 bisector to figure out which data point is closest to the mouse position. You will need to use the proper xScale and yScale. You can feed the x,y coordinates to a component that is overlayed on your VictoryChart with the same width/height. Position your tooltip in there using the x,y you passed in.

[hasSean]

@boygirl Any news? Really looking forward to this component :)

[boygirl]

@hasSean

We realized that there are a million ways to write a tooltip, and took a bit of a step back. This will still happen, but we want to make sure we build the right thing. In the meantime, all the pieces are in place to support custom tooltips in the current api. Check out the example we've published http://formidable.com/open-source/victory/recipes/tooltip

[hasSean]

@boygirl Thanks for the quick response! I'll look into the example recipe then for my current project.

[boygirl]

v1 of VictoryTooltip is coming at the end of the month!

• VictoryTooltip v1 will be scoped to a single component
• VictoryTooltip will be passed in as <LabelComponent/>
• VictoryTooltip will have it's own events that will be pushed onto the events array of it's containing component.
• VictoryTooltip will take an events prop, but default events will also be provided.

[luisrudge]

awesome :heart: