title: How to create a tooltip in d3.js while mouseover?
body: <p>I created a world map in <code>d3.js</code>.In that i need to enable the tooltip while hovering each country.</p>
  
  <p>I did mouseover using <code>mouseover</code> event but i don't know how to add tooltip.Also i got the current coordinate point using <code>d3.mouse(this)</code>.</p>
  
  <p>My problem is i need to know how to create a tooltip.I tried a few ways but not getting the proper solution.</p>
  
  <h2>My Code: ( I tried for append text when hover the countries But no Luck)</h2>
  
  <pre><code>svg.selectAll(".countries")
              .data(topojson.feature(world, world.objects.countries).features)
                    .enter()
                    .append("path")
                      .attr("style", "fill:" + json.cbc)
                      .attr("class", "country")
                      .attr("d", path)
  
  .on("mouseover", function(d) {  
  
                  current_position = d3.mouse(this); 
                  d3.select(this)
                      .append("text").text("Country Name")
                      .attr('x', current_position[0])
                      .attr('y', current_position[1])
                      //.attr('fill', 'black')​
  
           })
  </code></pre>
  
  <p>Please help.Thanks in advance.</p>