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.