Why are tipsy and qtip not picking my svg elements?

Question

I am trying to add tooltips to my map with d3 -- on advice from this post Show data on mouseover of circle

I am looking at this example from Bostock's tutorials.

My SVG looks like this:

    <svg width="503" height="629">
         <g class="precincts">
              <path class="O precinct" title="52-47" id="1-1"          d="8895922,383.750108730128L128.22787341161165,383....403.91773820327217L135.3001918293303,404.0915875970313Z">
              </path>
                  ...
              <path> 
              </path>
         </g>
    </svg>

I have this jquery in my document load function, which is called after my call to load the SVG:

 $('.button').tipsy({
    gravity: 'w',
    title: function() {
        return 'Hi there!';
    }
});
$('.precinct').tipsy({
    gravity: 'w',
    title: function() {
        alert("here");
        return 'Hi there!';
    }
});

The .button selector fires the tooltips -- so tipsy is loading properly (also no console errors). Also my ".precinct" selector is correct because I can write a css rule .precinct{style} and it will style the precinct svgs. So what am I missing? It should be selecting everything of class precinct and adding a tool tip on the same way that it selects everything of class button and adding a tool tip. Right?

I get the same problem with the simpletip tooltip library.

@CREET7EN I started this -- but I could not get tipsy to work by jsut copying and pasting in the js as an "External resource." Is that ow to do this? http://jsfiddle.net/akh2103/8gJC8/ — bernie2436, Mar 14 '14 at 16:15
@LarsKotthoff yep. same problem. I removed that line to test if it was causing the problem — bernie2436, Mar 14 '14 at 21:58

score 2 · Answer 1 · answered Mar 15 '14 at 00:20

I got it working fine on your fiddle (after dumping the library code & css directly into the fiddle, since you can't use github as a CDN for external resources):

http://jsfiddle.net/8gJC8/1/ (Might take a while to load)

However, positioning the tooltip is going to be a problem. Tipsy gets the position from the element using offset properties:

            var pos = $.extend({}, this.$element.offset(), {
                width: this.$element[0].offsetWidth,
                height: this.$element[0].offsetHeight
            });

That sort-of works in Chrome (although it looks weird on oddly-shaped paths, because the position offset returns is the top corner of the rectangle that completely contains the path), but the offset properties aren't part of the standard interface for SVG elements, so it might not work at all in some browsers (instead, you'll get the tooltip showing up in the top left corner of the window).

You might want to look at tooltip libraries written specifically for d3 and SVG, such as the d3.tip library. Alternately, if you want to do it yourself, I put together a fairly comprehensive example of the different ways of positioning tooltips over SVG elements.

Why are tipsy and qtip not picking my svg elements?

1 Answers1