Can't add a Bootstrap Popover on a text tag in d3 application

Question

The purpose of this snippet is to open a popup with a chart when a word is clicked. The chart is still not included into the popover, but I'm going one step at a time.

var childText = svg.selectAll("childText")
        .data(...)
        .enter().append("text")
        .attr("class", "btn btn-lg btn-danger")
        .attr("x", "...")
        .attr("y", "...")
        .attr("font-size", "...")
        .attr("fill", "...")
        .attr("role", "button")
        .attr("data-content", "it works!")
        .attr("data-trigger", "focus")
        .attr("data-toggle", "popover")
        .attr("title", "graph")
        .attr("data-content", "yi boi")
        .attr("tabindex", "0")
        .text("...")

$(document).ready(function () {
    $('[data-trigger="focus"]').popover({'show':true});
});

The HTML works without throwing any error but when I click the word, nothing happens. I notice a specific attribute (aria-describedby="popover900071") is generated inside the element as I click on the word. That's the only change happening, no popover nor errors appear.

Versions used:

Bootstrap: 3.3.7

d3: 3.5.0

(other libraries used) c3: 0.4.11, jQuery: 3.1.1

Bootstrap popover documentation: http://getbootstrap.com/javascript/#popovers

TL;DR: Trying to use popover from Bootstrap in d3 application, popover not appearing and no errors generated.

Answer 1

Im not 100% sure on the bootstrap integration but if you are looking for something similar you can use this below tooltip example. It functions exactly the same as a popover and you can always alter the CSS I have provided to make it look more similar to bootstrap. I personally feel that mouseover and mouseout are more user friendly than a click but you can always change what that part very simply.

sunburst example with tooltip

First include the below script tag:

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>

create the following css:

.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

In your JS file include the following:

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "**value of string**";
  })

After instantiating your svg variable call the tool-tip with:

svg.call(tip);

Finally, add the following to the element you want to display:

.on('mouseover', tip.show)
    .on('mouseout', tip.hide);

There you have it.