D3 Bootstrap Tooltip Popover

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//rawgit.com/shawnbot/d3-bootstrap/master/d3-bootstrap.min.js"></script>
<div class="container">


        <div class="well">
    <!-- <a class="pop" data-placement="bottom" data-title="look over there!" data-content="this is a popover">Another popover</a>, too. -->
</div>

<div class="pop">2</div>

</div>

CSS

a.pop{
  cursor: pointer;
}


div.popover{
  color: black;
}

JavaScript

const popover = bootstrap.popover().placement(function() { return d3.select(this).attr("data-placement"); });
    
d3.selectAll("a.pop") .call(popover);