Add tooltip in D3 to overlay Google Maps

Question

I am currently trying to extend this http://bl.ocks.org/mbostock/899711 example by adding tooltips for each marker. However, I was unsuccessful in this process. I tried the following procedures described in the following post:

http://bl.ocks.org/biovisualize/1016860

I tried to add mouseover and mouseout listeners to the original example, as they do not work. The following are modifications to the original example:

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

marker.append("svg:circle")
    .attr("r", 4.5)
    .attr("cx", padding)
    .attr("cy", padding)
    .on("mouseover", function(){console.log("mousover"); return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});;

Thanks for any help!

Answer 1

- z- . google svg. .