Question

I’ve got some popovers which I’d like to trigger ‘on hover’ of some elements of a raphael.js graphic, but I can’t seem to get them to work (using jQuery UI and Bootstrap).

I’m calling popovers on the site by referencing a specified class:

$(document).ready(function() {
  $('.show-popover').popover();
});

Then I can trigger popovers by adding the relevant attributes to an HTML tag: class="show-popover", rel="popover", data-trigger="hover", etc.

I’ve also got some embedded raphael.js SVG graphics on the site. I can’t seem to get the popovers to appear for elements (paths, text, etc.) of the raphael.js graphic after I’ve added the same attributes mentioned above.

Say I add a square to my graphic; I can then add the required popover attributes to the square in raphael.js like so:

square.node.setAttribute('class', 'show-popover');
square.node.setAttribute('rel', 'popover');
square.node.setAttribute('data-trigger', 'hover');
square.node.setAttribute('data-original-title', 'Popover title');
square.node.setAttribute('data-content', 'Main popover text here...');

I can see that the attributes are being added to the SVG with Firebug, but the popover isn’t appearing on hover.

Is it possible to trigger popovers for hovering over elements of a raphael.js graphic?

[Edit] See example http://jsfiddle.net/cQGQT/

Answer 1

By default, Bootstrap appends the popover element as a sibling of the triggering element. In this case, it is adding the popover as a child of the SVG node. Since div tags are not renderable inside an SVG node, nothing shows up. To get around this, I appended a div to the body to act as a holder for the popover, and positioned and toggled it via the DOM mouse events for circle SVG elements.

Here is the idea:

// ps is absolutely positioned div in body
ph.popover({
  trigger: 'manual',
  title: 'Popover Title',
  content: 'Popover Content',
  animation: false
});

$('circle').on('mouseover', function(evt){
  var targ = $(evt.target),
  off = targ.offset(),
  r = parseInt(targ.attr('r')); 
  ph[0].style.left = (off.left + r*2) + 'px';
  ph[0].style.top = (off.top + r) + 'px';
  ph.popover('show');
}).on('mouseout', function(evt){
  ph.popover('hide');  
});

and the full fiddle:
http://jsfiddle.net/BzJCq/2/

I am not sure that this is the best approach, but I think its the right direction. You can try to use the ‘selector’ option in the popover settings, but I find it a little trickier to place the popover that way.

[EDIT – to address swapping title/content]

If you want to swap the content of the popover based on the which node is triggering it, you can do something like:

// add different popover data to circles
circle.node.setAttribute('pop-title', 'Red Circle');
circle.node.setAttribute('pop-content', 'Content for the red one');

circle2.node.setAttribute('pop-title', 'Green Circle');
circle2.node.setAttribute('pop-content', 'Content for the green one');

And then in the triggering logic, update the pop-over element’s data attributes like so:

// ph is the element holding the popover
ph.attr('data-original-title', targ.attr('pop-title'));
ph.attr('data-content', targ.attr('pop-content'));

I updated my fiddle link above.