SVG support, wrapping rect or circle, not using foreignObject

[stahlmanDesign]

I have an SVG bar graph and I want to attach tooltips to the rectangles (bars).

I tried 3 things that failed:

1. It says <Tooltip/> is invalid markup inside an SVG.
2. I also tried the HOC approach, but a rect doesn't have a 'title' property (it does, but is different than normal HTML elements).
3. I tried to insert a foreignObject inside the SVG, and that works, but it replaces my SVG element so is not a solution.

Is there a way to make the plugin work with SVG elements such as rect or circle?

EDIT Found another library that supports SVG by wrapping it somehow: const SVGOrigin = Origin.wrapBy('g') https://github.com/kuy/redux-tooltip

[tvkhoa]

@stahlmanDesign Pls check new version 1.2.2. We support rawTemplate props to help you render DOM element in tooltip content.

<Tooltip
          trigger="click"
          rawTemplate={document.querySelector('#rawHTML')}
>
          Raw html
        </Tooltip>

You can create a html template and use rawTemplate to attach it into tooltip. Hope it can solve your problem.

Thanks 🍡

[stahlmanDesign]

Thanks, I am able to wrap an SVG, but I can't use a Tooltip inside an SVG, on each rect for example.

It doesn't work, probably because Tootlip is rendered as a div, which is invalid markup inside svg:

<svg { ...svgProps }>
                  <g>
                    <Tooltip
                      trigger='click'
                      rawTemplate={ document.querySelector( '#tt-' + i ) }
                      title={ 'message' + i }
                    >
                      <rect id={ 'tt-' + i } { ...rectProps }></rect>
                    </Tooltip>
                    
                  </g>

                </svg>

The rect is not rendered because the tooltip is a div, and the browser sees it as invalid. If I put the tooltip around the svg it works, but then every rect inside the svg triggers the same message, and I want a different message for each rect, so show the values of length, for example.

[ecjs]

I am having this same issue, actually trying something very similar using: https://www.npmjs.com/package/react-calendar-heatmap

Each one of the calendar days is an SVG rect. Ideally, I could wrap them with the tooltip, but a div definitely won't work.

[bernatfortet]

Does anybody have updates regarding this issue?

I found that you can use an html tag named <foreignObject> and then add tippy inside but it doesn't work great

[bernatfortet]

I ended up forking the library and adding support for custom Tags if anyone wants to check it out

[mwebb33]

Bernat I am totally interested but I would like for it to get supported in react-tippy

[mwebb33]

I would be willing to open a PR to support this

[pelotom]

Bueller?