using qtip2 tooltip with d3.js

Question

I'm a d3.js newby and I'm working with a treemap example. The original example shows a tooltip when hovering over a specific section. I would like to use a qtip2 tooltip instead.

In the d3.js example the following lines are used to add a default tooltip i.e. by setting the title attribute:

g.append("rect")
    .attr("class", "parent")
    .call(rect)
    .append("title")
    .text(function(d) { return "total: " + formatNumber(d.value); });

The qtip2 website suggests the (jQuery) line

$('[title]').qtip(); 

would replace the default tooltip with the qtip2 variant. However, it doesn't appear anywhere. Is this the way I should call it?

I was able to produce a qtip2 tooltip by adding a class to the rect elements, like so

   g.append("rect")
    .attr("class", "parent")
    .classed({'QTIP2': true})
    .call(rect)
    .append("title")
    .text(function(d) { return "total: " + formatNumber(d.value); });

followed by

$('rect.QTIP2').qtip({
    content:  'Total number of hits:' + "some value",   
    position: {my: 'center',  at: 'center'},
    style: {width: 75, classes: 'qtip-dark qtip-shadow'},
            show: { effect: function(offset) {$(this).fadeIn(500);}}        
});

However, I don't know how to change the "some value" string by the actual d value used in d3. I'm somewhat familiar with d3.select(this) , datum() and __data__ property, but I was unable to get it working. The line $('rect.QTIP2').text() also produced some results, however, this gave the values for all rects and not just the one you hover over.

Any help is greatly appreciated!

Answer 1

The $('[title]').qtip(); line wasn't working because it is looking for an element that has a "title" attribute (like in HTML), instead of looking for an element that has a child <title> element (which is how titles are handled in SVG). So the selector doesn't return any elements, and no tooltips are created. As you discovered, so long as your JQuery selector actually returns valid elements, you can get your qtip to work.

To access the data, you're going to need to get into the nitty-gritty. The d3 data is stored in an element property __data__. The JQuery method to access element properties (which are not the same as element attributes) is .prop( propertyName ).

So your code would be something like

$('rect.QTIP2').qtip({
    content: {
       text: function(event, api) {
                 return  'Total number of hits:' + 
                    formatNumber( $( this ).prop("__data__").value );
              }
       },   
    position: {my: 'center',  at: 'center'},
    style: {width: 75, classes: 'qtip-dark qtip-shadow'},
    show: { effect: function(offset) {$(this).fadeIn(500);}}        
});

(Updated: this seems to be the correct way to make the qtip content a function of the individual element triggering it.)

If that's getting confusing, you might want to check out the d3-tip plug-in, which uses the d3 style of function(d,i){} callbacks to format the tooltips based on the element data and index.