JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//prag.ma/code/d3-bootstrap/d3-compat.js"></script>
<script src="//prag.ma/code/d3-bootstrap/bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="//prag.ma/code/d3-bootstrap/css/bootstrap.css">
<div class="container-fluid">
      <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>
    </div>

JavaScript

var tooltip = bootstrap.tooltip()
        .placement(function() {
          return this.getAttribute("data-placement");
        });

      d3.selectAll("a.tt")
        .call(tooltip);