title: How to show the tooltip on d3 force directed layout node?
body: <p>I have built a  sample d3 visualisation with the hierarchy data, which works very well.I need to display the data binded to that icon/node when the user move mouse across the node. I have done that too, which works well.</p>
  
  <p>I need to display the data according to the node on the tooltip. i do not want to bind an html element for the same.</p>
  
  <p>Here is my code</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>  &lt;div id="chart"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code> node = vis.selectAll(".node");
          node = node.data(force.nodes());
          node.exit().remove();
          node.enter().append("g")
              .attr("class", "node")
              .on("click", click).on("mouseover", function(){return tooltip.style("visibility", "visible") 
                   tooltip.text
                   ;})
  .on("mousemove", function(){return tooltip.style("top",
      (d3.event.pageY - 130)+"px").style("left",(d3.event.pageX - 130 )+"px");})
  .on("mouseout", function(){return tooltip.style("visibility", "hidden");});
  </code></pre>
  
  <p><a href="http://jsfiddle.net/sajeetharan/qnykLx4g/3/" rel="nofollow">APPLICATION ON FIDDLE</a></p>