D3 Bootstrap Tooltip

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="//prag.ma/code/d3-bootstrap/bootstrap-tooltip.js"></script>
<div class="container">
      <h1>tooltips</h1>
      <p>This
      <a class="tt" data-placement="bottom" title="the word paragraph">paragraph</a>
      should have some
      <a class="tt" data-placement="top" data-html="true" title="the word &lt;tooltip&gt;">tooltips</a>
      in it. You can put them
      <a class="tt" data-placement="left" title="look over here!">on the left</a>
      or 
      <a class="tt" data-placement="right" title="look over there!">on the right</a>, too.
      </p>
     <svg></svg>
 </div>

CoffeeScript

tooltip = bootstrap.tooltip()
  .placement () -> @getAttribute("data-placement")

svg = d3.select("svg")
  .attr("width", 400)
  .attr("height", 200)
  .append("g")
  .attr("transform", "translate(100, 100)")
    
svg.selectAll("circle")
  .data(d3.range(5)).enter()
  .append("circle")
     .attr("cx", (d, i) -> i*20 + 10)
     .attr("cy", 0)
     .attr("r", 5)

d3.selectAll("circle")
  .call(bootstrap.tooltip())