VictoryTooltip not showing when wrapped in another component unless using VictoryVoronoiContainer

[kmzeitgleich]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

37.0.2

Code Sandbox link

No response

Bug report

When using simple tooltips without VictoryVoronoi for VictoryBar, VictoryScatter and I guesss probably all other kinds of charts, the tooltip will only display when it is not a custom one

meaning I can only use labelComponent={<VicoryTooltip />} and not labelComponent={{<CustomTooltip />}
The active prop does not seem to get passed. Maybe the events get lost?

Code Snippet from the website https://commerce.nearform.com/open-source/victory/guides/tooltips#customizing-tooltips


class CustomFlyout extends React.Component {
  render() {
    const {x, y, orientation} = this.props;
    const newY = orientation === "bottom" ? y - 35 : y + 35;
    return (
      <g>
        <circle cx={x} cy={newY} r="20" stroke="tomato" fill="none"/>
        <circle cx={x} cy={newY} r="25" stroke="orange" fill="none"/>
        <circle cx={x} cy={newY} r="30" stroke="gold" fill="none"/>
      </g>
    );
  }
}

class CustomTooltip extends React.Component {
  render() {
// This does not work
    return (<VictoryTooltip
                {...this.props}
                //text="test"
                //active // it shows up properly when active is true!
              />)
  }
}

class App extends React.Component {
  render() {
    return (
      <VictoryChart
          domain={{ x: [0, 11], y: [-10, 10] }}
        >
          <VictoryBar
            labelComponent={
// does not work
              <CustomTooltip
//<VictoryTooltip // works
                //flyoutComponent={<CustomFlyout/>}
              />
            }
            data={[
              {x: 2, y: 5, label: "A"},
              {x: 4, y: -6, label: "B"},
              {x: 6, y: 4, label: "C"},
              {x: 8, y: -5, label: "D"},
              {x: 10, y: 7, label: "E"}
            ]}
            style={{
              data: {fill: "tomato", width: 20},
              labels: { fill: "tomato"}
            }}
          />
        </VictoryChart>
    );
  }
}
render(<App/>);


The reason why I don't want to use a VictoryVoronoiContainer is because I want to see the Tooltips when hovering ther bar and not the nearest Point.
When I have two bars, one has a high value and one a low value and I use VictoryVoronoiContainer, the tooltip will be shown for the low value bar, even when my mouse is on the higher value bar

Steps to reproduce

1. Copy the Code perhaps into the live editor on the website
2. Hover over a bar, see nothing
3. Change the labelComponent to VictoryTooltip
4. Hover over a bar, see a tooltip

Expected behavior

The tooltip should show up, even when the VictoryTooltip is wrapped in another component

Actual behavior

The active prop never gets passed, so the CustomTooltip never shows

Environment

- Device: Desktip
- OS: Multiple
- Node: 16
- npm: 8.19

[kmzeitgleich]

Example of tooltips being wrong when using VictoryVoronoiContainer and having the curser hovering over the left bar, but the tooltip shows the middle bar

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[github-actions]

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.

[r281GQ]

Hello @kmzeitgleich !

Thanks for the issue!

We have some examples for implementing custom tooltips.

Please see the documentation here:

https://commerce.nearform.com/open-source/victory/guides/tooltips#wrapping-victorytooltip

I used your code with the tips from the above link and I managed to have your desired behaviour:

CustomTooltip.defaultEvents = VictoryTooltip.defaultEvents;

Please let me know if that works for you.