HTML tooltips and/or custom attributes on svg paths

[eurobob]

Bugs and Questions

Checklist

• [X] I have read through the FAQ and Guides before asking a question

• [X] I am using the latest version of Victory

• [X] I've searched open issues to make sure I'm not opening a duplicate issue

The Problem

I'm finding the tooltip solution to be rather limiting for my needs. For example, i am wrapping a Pie Chart as a custom component to create a specifically styled version. But my tooltip content will be dynamic, and change depending on where and when the pie chart is used. I've found the label/tooltip system to be quite cumbersome for custom implementation and even using foreignobject to wrap html starts to become overly complex for my needs.

Feature Requests

Checklist

• [X] I've read through the Docs and Guides to make sure this functionality doesn't already exist

• [X] I've searched open issues to make sure I'm not opening a duplicate issue

Description

I want to be able to utilise a completely separate tooltip implementation, specifically, this one https://github.com/wwayne/react-tooltip

It requires some attributes added to a target element, like so:

<VictoryPie
  name="mainPie"
  data={data}
  x={xAxis}
  y={yAxis}
  dataComponent={<Slice data-tip data-for="target" />}
/>

Can we enable for adding custom attributes this way? Much like we can do with the className?

Or alternatively, can my tooltip be a html element?

[becca-bailey]

I have used material-ui tooltips with Victory in the past, but I agree that it was a bit painful, and I'm not sure whether react-tooltip would be the same way. I'll tag this as a feature request and keep it open for now.

[dwwr]

Hey there! Yesterday I was wanting to get a react element into my VictoryTooltip.

I found this comment where the user demonstrates how to make a custom victory tooltip with HTML guts: https://github.com/FormidableLabs/victory/issues/445#issuecomment-327953835

That example shows a class component^. With some fiddling, I was able to make a functional version. Importantly, you need to lodge everything within a foreignObject (lol):

export const CustomTooltip: React.FC<VictoryTooltipProps> = props => {
  console.log('props', props)
  return (
    <g style={{ pointerEvents: 'none' }}>
      <foreignObject x={props.x} y={props.y} width="150" height="100">
        <div className="bg-white h-100 w-100">
          You can put HTML or react elements here
        </div>
      </foreignObject>
    </g>
  )
}

And usage eg:

          <VictoryBar
            {...}
            labels={() => ''}
            labelComponent={
              <VictoryTooltip flyoutComponent={<CustomTooltip />} />
            }
          />

This should hopefully be helpful. Cheers!

[github-actions[bot]]

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[bot]]

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.