Monthly Archives: April 2014

Twitter Bootstrap Tooltips playing nice with SVG

First, read about Bootstrap tooltips and popovers on Bootstrap’s website.

Want to add a tooltip to an svg object?

Check out this question on Stack Overflow:

How do I show a bootstrap tooltip with an svg object.

Or, just jump right on ahead to the jsfiddle.

The essence of it boils down to using $('svg -whatever-').tooltip(-options-).

For example, if all you elements have class cells, then you would use something like


// title: compulsary if you want a non-empty tooltip
d3.selectAll('.cells').attr('title','This is my tooltip title');

// content: popovers only. 
d3.selectAll('.cells').attr('data-content','This is some content');

// set the options – read more on the Bootstrap page linked to above
$('svg .cells').popover({
   'trigger':'hover'
   ,'container': 'body'
   ,'placement': 'top'
   ,'white-space': 'nowrap'
   ,'html':'true'
});

Confused about how to add tooltips in general? Or just want to make your life easier and deal with them all at once?

Read this answer on Stack Overflow: Bootstrap 3.0 Popovers and Tooltips.

The gist of it: 

$('[data-toggle="tooltip"]').tooltip({
    'placement': 'top'
});
$('[data-toggle="popover"]').popover({
    trigger: 'hover'
    ,'placement': 'top'
});