SVG support

[cimi]

Nice library! I've just stumbled upon it today and played with it a bit.

I've tried using react-hint to add tooltips to SVG elements and it doesn't work. I'm guessing it's because it tries to inject 'plain' DOM elements (div, span) as the wrappers for the tooltip and that doesn't play well with SVG.

I've used redux-tooltip successfully with SVG. That library allows the user to specify a custom wrapper, for example if I put g as my preferred tag everything works nicely. Not sure how easy a change this is to make or there is any other SVG specific logic involved besides just switching tags.

[slmgc]

@cimi oh, that's an interesting use-case! Could you post a link to a fiddle with an example? I would like to figure out what's wrong as it seems that react-hint should work. Unless it's being placed inside of the SVG.

[slmgc]

I've checked react-hint with SVG and it worked just fine for me:

Please reopen in case you'll be able to provide a repro.

[mockey-jockey]

using SVG react hint not working in IE11,Except IE for all browser working well.kindly help to resolve this

[mockey-jockey]

@cimi @slmgc -->I fixed this issue ,element.dateset not working in IE,

<ReactHint events delay={100} onRenderContent={(element) => {
          if (element && element.dataset && element.dataset.rh) {
            return (<div className="react-hint__content">
              {element.dataset.rh.split("\n").map((content, i) =>
                <span key={i}>{content} {content && <br />}</span>
              )
              }
            </div>)
          }
          return null;

        }} />

changed to -------

<ReactHint events delay={100} onRenderContent={(element) => {
           if (element) {
            let datasetValue = element.getAttribute("data-rh");
            if(datasetValue){
              return (<div className="react-hint__content">
                {datasetValue.split("\n").map((content, i) =>
                  <span key={i}>{content} {content && <br />}</span>
                )
                }
              </div>)
            }                               
          }
          return null;

        }} />

Above code will work perfectly in IE11

[cimi]

Sorry for the super late reply!

Unless it's being placed inside of the SVG.

Yes, this is/was the problem. We've fixed and we're happy users of react-hint.