I implement a tooltip over circles placed through d3 on a leafletmap 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");
feature.on("mouseover",function(d) {
d3.select(this)
.transition()
.ease("elastic")
.duration(500)
.attr('r', function (d){
return (d.properties.xy * 5)
.style("stroke", "black")
d3.select("#mytooltip")
.style("visibility", "visible")
.text(d.properties.xy1 + " " + d.properties.xy2)
});
feature.on("mousemove", function() {
return tooltip.style("top", (d3.event.pageY-10)+"px")
.style("left",(d3.event.pageX+10)+"px");
});
feature.on("mouseout",function(d) {
d3.select(this)
.transition()
.ease("elastic")
.duration(500)
.attr('r', function (d){
return (d.properties.xy);
})
.style("stroke", "none")
d3.select("#mytooltip")
.style("visibility", "hidden")
});
Where my feature is this:
var feature = g.selectAll("circle")
.data(myData.features)
.enter()
//...
I wonder how I can style the tooltip that shows up? Is there a way to give it a background, write something in bold, italic, different colors etc?
See Question&Answers more detail:os