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({
   ,'container': 'body'
   ,'placement': 'top'
   ,'white-space': 'nowrap'

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:

    'placement': 'top'
    trigger: 'hover'
    ,'placement': 'top'

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s