title: Tooltip in d3 js (Bullet charts)
body: <pre><code>d3.json("data.json", function(error, data) {
    if (error) throw error;
  var div = d3.select("body").append("div")   
      .attr("class", "tooltip")               
      .style("opacity", 0);
    var svg = d3.select("body").selectAll("svg")
        .data(data)
      .enter().append("svg")
        .attr("class", "bullet")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom).on("mouseover", function(d) {        
              div.transition()        
                  .duration(200)      
                  .style("opacity", .9);      
              div.html("Tooltip" + "&lt;br/&gt;"  + d.measures);    
              })
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
        .call(chart);
  </code></pre>
  
  <p>Getting below result:
  <a href="https://i.stack.imgur.com/EYG2E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EYG2E.png" alt="enter image description here"></a></p>
  
  <p>Result what I am expecting:
  <a href="https://i.stack.imgur.com/h93yc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h93yc.png" alt="enter image description here"></a></p>
  
  <p>Is there any error in my code or do I need to do things differently.</p>