Bind Bootstrap tooltip to dynamically created SVG element with d3

Question

I would like to dynamically create an SVG element with d3 and bind a Bootstrap tooltip to it.

In a non-dynamic HTML scenario these tooltips are bound like this:

$('[rel=tooltip]').tooltip

Two problems to overcome when doing it dynamically in SVG:

1) HTML divs included in SVG don't render

The solution is to use the container property in the options (1,2) which works great:

$('[rel=tooltip]'').tooltip({
  container:'body'
});

2) Element doesn't exist at moment page is loaded

The advice here is to use the selector property which causes tooltip objects to be delegated to the specified targets. This works:

$('body').tooltip({
  selector: '[rel=tooltip]'
});

The problem arises when I try to combine both approaches (see fiddle):

 $('body').tooltip({
   container: 'body',
   selector: '[rel=tooltip]'
 });

This seems to ignore the container property, and attaches the tooltip within the body of the SVG where it is not displayed. One other problem with this example is that the order of the properties matters - if they are reversed it doesn't work at all.

The question is how can I solve both these problems at the same time?

One approach that might be cleaner and give more control would be to attach the function directly in d3 on creation of the element, or when a mouse event happens. I tried:

.on('mouseenter', $(@).tooltip({container: 'body'}));

Which gave TypeError: listener.apply is not a function

Can you help?

Answer 1

It works if you run the two pieces of code separately instead of together, i.e. instead of

$('body').tooltip({
  container: 'body',
  selector: '[rel=tooltip]'
});

run

$('body').tooltip({
  selector: '[rel=tooltip]'
});
$('[rel=tooltip]').tooltip({
  container: 'body'
});