Tooltip on mouseover d3

Question

Within a Callbackfunction I have this:

/...
feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("cubic")
    .duration(10)
    .attr('r', function (d){ 
     return (d.x);
    })
        .tooltip.style("visibility", "visible");
      });

My tooltip is defined like so:

var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

However, the tooltip won't pop up. Any ideas why? How would I append the tooltip to the mouseoverevent? And: How would I change the text in there (assuming I want text from my data which I can access with function(d) {....)

Code extracted from here

Answer 1

First give an ID or class to your tooltip for selection like this:

var tooltip = d3.select("body")
    .append("div")
    .attr("id", "mytooltip")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

Next Instead of doing this:

feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("cubic")
    .duration(10)
    .attr('r', function (d){ 
     return (d.x);
    })

        .tooltip.style("visibility", "visible");//this is wrong
      });

Do this to show tooltip on mouse over:

feature.on("mouseover",function(d) { 
    d3.select(this)
    .transition()
    .ease("cubic")
    .duration(10)
    .attr('r', function (d){ 
     return (d.x);
    });
    //show tooltip on hover
    d3.select("#mytooltip")
    .style("visibility", "visible")//set style to it
    .text("new tooltip")//set text to it
   });

Furthermore, add this for the tooltip to show up next to the mouse (as shown here)! Otherwise the tooltip probably gets displayed somewhere on your site where you cannot see it!

feature.on("mousemove", function() { 
    return tooltip.style("top", (d3.event.pageY-10)+"px") 
    .style("left",(d3.event.pageX+10)+"px"); 
    });