Tooltipster not positioning on SVG path correctly

[jbarkun]

Hey, awesome plugin!

I've attached it to an SVG path (created by Raphael) for some dynamic charts, but I've run into a problem positioning the tooltip properly over the curved paths. It's currently positioned off to one side (see image: I'm hovering over the blue path)

Here's the code used for the tooltip:

$(maleArc1.node).tooltipster({
     content: 'Male Characters',
     theme: 'tooltipster-shadow'
 });

I read in other issues that there's currently no way to force the tooltip to follow the mouse pointer, but would you be able to suggest an alternative approach to reposition the tooltip? I'm by no means a developer, just good at guessing with code, so any help would be appreciated.

Thanks!

[louisameline]

Hi, thanks for the report. The original author may have tested this library against SVG elements, but I haven't to be honest. Could you please set up a jsFiddle to demonstrate the issue ? Thank you.

[jbarkun]

Thanks for the reply! Here's the jsFiddle:
https://jsfiddle.net/Lq0uvL74/3/

[tBaxter]

Also interested in a resolution to this. One possible idea is to be able to initialize the tooltip to given X and Y coordinates on the screen

[louisameline]

That's planned for Tooltipster v4 :)

[kisabelle]

Hi @louisameline do you have a target date for Tooltipster v4 or for this fix?

I'm working on a big project that revolves around an interactive SVG and wanted to use Tooltipster for all of the interactions. The elements that will have tooltips are all circular/elliptical. In my case the tooltip is being added to the left edge of the element instead of the center. Is there an easy way I can tell it to offset X by half the width of the element?

I can provide an additional jsFiddle if you'd like - just let me know.

[louisameline]

Hi @kisabelle,

you can try out v4 right now on the v4 branch, I think it works well with SVG, except for the onlyOneoption currently. jQuery's .addClass method does not work on SVG elements and we'll have to patch this at some point if we want to support SVG at 100%.

When you use v4, make sure to read its bundled documentation as there have been a few breaking changes.

For more custom/accurate use cases, I'm still thinking about how to implement what tBaxter talked about but it's not as easy as it sounds. I'll let you know.

[kisabelle]

@louisameline Thanks!

[louisameline]

As I said in the issue referenced above, a solution like SVG.js's "rbox" should find the correct dimensions of an SVG path, but I don't know how many more SVG fixes could be needed in the future, so I haven't decided if we were going to include a fix or just make Tooltipster compatible with the use of an external SVG library that could do the math for us.

[louisameline]

Tooltipster v4 now provides improved support of SVG paths, polygons and polylines. Just include SVG.js and its screenBBox plugin in your page and Tooltipster will use them out of the box to compute better coordinates (not perfect ones, but that's the best we can reasonably do with today's browsers). SVG.js's maintainer @Fuzzyma was very quick to work on our issue here and deserves all the credit for this improved support.

An event also makes it possible for people to provide element coordinates themselves.

[makc]

ok I did this:

    <script src="https://code.jquery.com/jquery-1.10.0.min.js"></script>
    <script src="https://rawgit.com/iamceege/tooltipster/v4/demo/svg.min.js"></script>
    <script src="https://rawgit.com/iamceege/tooltipster/v4/demo/svg.screenbox.js"></script>
    <script src="https://rawgit.com/iamceege/tooltipster/v4/dist/js/tooltipster.bundle.min.js"></script>
    <link href="https://rawgit.com/iamceege/tooltipster/v4/dist/css/tooltipster.bundle.min.css" rel="stylesheet" type="text/css" />
    <script>
        function onLoad () { // called by my other code
            console.log($('svg *').length); // 343
            $('svg *').tooltipster ();
        }
    </script>

and in svg I have title nodes in paths. however, I still see standard browser tooltips and nothing like your lib supposed to show?

[makc]

a ha, you still expect title attributes, not nodes, in svg...

[louisameline]

Shouldn't we? I don't know much about svg.

[makc]

Here is an example of titles in svg: https://jsfiddle.net/f113c5qe/

[louisameline]

Done, I added the support of the <title> tag (when no title attribute exists). I moved the support of SVG from Tooltipster core to a plugin however, just include its file as shown in the demo and it should work. Thanks for the heads up!

[louisameline]

Tooltipster v4 is out. Thank you.

What's new in v4: #565
Migration guide from v3 to v4: #566

[ezzatron]

I've been trying this out, and I noticed that Tooltipster seems to leave the original <title> element behind, causing both the JS tooltip and the native tooltip to appear at the same time. I got around this by using the functionReady option to manually remove the element myself:

jQuery('.tooltip').tooltipster({
    functionReady: function (instance, helper) {
        var svgTitle = helper.origin.querySelector('title');

        if (svgTitle) {
            helper.origin.removeChild(svgTitle);
        }
    }
});

Tooltipster should probably be doing this without my intervention, though.

Also, unfortunately, the positioning of the tooltip when used on a <tspan> element doesn't seem to work. It positions itself as if it were used on the parent <text> element. Not sure if that's my problem (maybe <tspan> doesn't allow positioning), or a bug?

[louisameline]

Thank you for the report. I have fixed the title issue in 4.0.2. I opened a new issue for the positioning on tspan: #567

[ezzatron]

Thanks!

[makc]

@ezzatron ha, I did not notice that since I switched to attribute titles and removed title nodes by $('svg title').remove() or similar selector.

[ezzatron]

@makc I considered that, but having the titles work normally when the SVG is viewed directly seems like a good thing too.