React-tooltip: Renders tooltip but nothing shown

[tblazina]

I have the issue where I am trying to place a tooltip on an svg element like so:

    return (
      <g transform={translate} key={props.x}>
        <rect
          data-tip data-for='test'
          className={styles.verticalSingleBarAxisRect}
          width={barWidth}
          height={props.width}
          transform={`translate(${props.margin.left + 10},1)`}
        >
        </rect>
        <ReactTooltip id='test' type='error'>
          <span>Test tooltip </span>
        </ReactTooltip>
        </g>);

And the ReactTooltip component is rendering and when I inspect the HTML elements in chrome, the wrapper element and element are there but nothing appears. When I implement one of the examples from http://wwayne.com/react-tooltip/ on the same page, just outside of an svg element they render just fine. Any ideas on how to get the tooltip to appear? Thanks!

[tblazina]

Ok so I see you can't place the ReactTooltip component within elements within an SVG, but rather the has to be placed outside of the SVG and I had to add

   componentDidUpdate(){
    ReactTooltip.rebuild()
  } 

to the component which renders the svg. So then my question would be: Is there anyway to add the tooltips within the SVG? As it is now, it seems I would have to do callbacks back to the parent component which is rendering the svg element in order to let it know which tooltip to render based on the id that I give it in the child component where the rect element is being rendered.

[huumanoid]

May be you can do something like

    return (
      <div>
        <ReactTooltip id='test' type='error'>
          <span>Test tooltip </span>
        </ReactTooltip>
        <g transform={translate} key={props.x}>
          <rect
            data-tip data-for='test'
            className={styles.verticalSingleBarAxisRect}
            width={barWidth}
            height={props.width}
            transform={`translate(${props.margin.left + 10},1)`}
          >
          </rect>
        </g>
      </div>
);

Is it appropriate for you?

If I understand you clear, you have at least two components: Parent and SVG, Parent renders and SVG actually renders svg, right? Then, why don't you place ReactTooltip.rebuild() in SVG itself?
In case there are some misunderstanding: ReactTooltip.rebuild() is a static method which re-renders every <ReactTooltip /> component.

[tblazina]

Thanks much for the quick response!

Yes so if I do it similar to what you suggest..

      <g>
        <ReactTooltip id='test' type='error'>
          <span> Test tooltip </span>
        </ReactTooltip>
        <rect
          data-tip data-for='test'
          className={styles.verticalSingleBarAxisRect}
          width={barWidth}
          height={props.width}
          transform={`translate(${props.margin.left + 10},1)`}
        >
        </rect>
      </g>

it renders everything and now the style property of the updates as I scroll around but it still does not display the tooltip?

If it helps to clarify, the component structure is like...

<div> 
  <svg>
    <g>
      <g>
        <g>
         <ReactTooltip>
            <span>some text</span>
         </ReactTooltip>
         <rect/>
        </g>
      </g>
    </g>
  </svg>
</div>

Thanks again, sorry if this is something simple i'm not understanding about how react-tooltip works!

[huumanoid]

Thank you for your feedback, I'm too interested to react-tooltip would be able to work with svg.
Thank you for clarification.

May be tooltip is actually displayed, but overlapped by svg somehow? Please, check position and layout of the tooltip's <div> element with the inspector.

[tblazina]

So interestingly, when I inspect the component with React tools in chrome, it shows the component in the upper left of the screen with '0px x 0px' as the dimensions, as opposed to when I put something from the react-tooltips examples in my app, but not within the svg element
it shows the component with a sub component which shows directly above the associated element when I inspect it with React tools in chrome.

[huumanoid]

I think it's a good approach to place <ReactTooltip /> outside of <svg> and call ReactTooltip.rebuild from the svg renderer (yes, not from the parent, but from svg renderer, or subrenderer, whatever you think is suitable).
If this is your case and it's still doesn't work, please, try to build an example reproduces this issue.
I'm sorry, I'm too busy right now to do it by myself.

[tblazina]

No worries! i'll play around with it for another hour or so and if can't resolve then i'll just use react-faux-dom to make this one chart only in d3, was just trying to avoid it by using pure react but also don't have a lot of time to try to figure it out. Thanks for your help!

[rahuls360]

I happened to face an issue like this.
In my case, I was using Child Routes, so I was unable to use the component from the parent.

I created another inside my child route and it worked for me. (I was setting tooltip using data-tip attribute)

Just sharing it here, in case it helps someone.

[gurpreetsingh41333]

I happened to face an issue like this.
In my case, I was using Child Routes, so I was unable to use the component from the parent.

I created another inside my child route and it worked for me. (I was setting tooltip using data-tip attribute)

Just sharing it here, in case it helps someone.

thank you, it worked for me