JSFiddle - React, Tailwind, and code Playground

by ramnathv

HTML

<script src="http://d3js.org/d3.v3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/css/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc2/js/bootstrap.js"></script>
<a href="#" rel="tooltip" title="first tooltip">hover over me</a>

JavaScript

var data, svg, svg2;
data = [
  { x: 20, y: 40, name: "B"},
  { x: 50, y: 70, name: "A1"},
  { x: 100, y: 120, name: "A2"}
];


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

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", "#fff")
  .attr("title", function(d){return d.name + " " + d.x})
  .attr("class","my_circle");

$(document).ready(function () {
    $("a").tooltip({
        'placement': 'right'
    });
    
    $("svg circle").tooltip({
        'container': 'body',
        'placement': 'right'
    });
});