JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://d3js.org/d3.v4.min.js"></script>


<div data-toggle="tooltip" title="Hello" style="display:inline-block;">
<span>Test</span>
</div>

JavaScript

var svg = d3.select("body")
.append('svg:svg')
.attr('width', "200px")
.attr('height', "200px")
.style('background', "lightblue")
.style('margin', "10px");

var data = [{x: 20, y: 30}];

svg.selectAll("circle").data(data, function(d) { return d.name;})
.enter().append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y;})
.attr("r", 10).attr("fill", "steelblue")
.attr("title", "this is a circle")
.attr("data-toggle","tooltip");

$('[data-toggle="tooltip"]').tooltip({container:'body', placement: 'bottom'});