I'm using d3 circles on a leaflet map. I want to add tooltips on the circles, the tooltips are created as you can see on the image but they seem to be underneath the map, I want to bring them on top.
I need those tootlips to display information about the dataset used to create the circles so I can't use Leaflet tooltips.
The tooltip is there but it is underneath the map:
var mymap = L.map('map', {
zoomControl: false
}).setView([36.71367, 3.18031], 15.5);
var width = document.getElementById('map').offsetWidth;
var height = document.getElementById('map').offsetHeight;
L.svg().addTo(mymap);
var svg = d3.select("#map").select("svg"), /* add the svg to leaflet map */
g = svg.append("g");
function go() {
var popup = L.popup();
var dispo;
//vider le dataset
dataset = []; /* this is related to the data i'm displaying with circles */
//Enlever les anciens cercles
g.selectAll("circle")
.data(dataset)
.exit()
.remove();
d3.json('data/data.json', function(data) {
//some code to fill the dataset
pane: "tilePane"
}).addTo(mymap); //end L.geoJSON
dataBind();
update();
}); //end json
function dataBind() {
circles = g.selectAll("circle")
.data(dataset)
.enter()
.append("circle");
}
mymap.on("zoomend", update);
//Placer les cercles sur chaque salle
function update() {
//tooltip code
var infobulle = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "white")
.style("opacity", "0")
.style("padding", "0 10px");
circles.attr("cx",
function(d) {
return mymap.latLngToLayerPoint([d[4].lat, d[4].lng]).x;
}
).attr("cy",
function(d) {
return mymap.latLngToLayerPoint([d[4].lat, d[4].lng]).y;
}
)
.attr("pointer-events","visible")
.style("opacity", 0.8)
.attr("r", 0)
.style("fill", function(d, i) {
return colors(d[3].Type);
})
.on("mouseover", function(d){
infobulle.transition()
.style("opacity", .9)
infobulle.html(" heures ")
.style("left", (d3.event.pageX - 35 + "px"))
.style("top", (d3.event.pageY - 30 + "px"))
})
.on("mouseout", function(d){
infobulle.transition()
.style("opacity", 0)
})
}
I think the style property z-index would be useful in this case. You can add the .style("z-index", "999")
to var infobulle as:
//tooltip code
var infobulle = d3.select("body")
.append("div")
.style("position", "absolute")
.style("background", "white")
.style("opacity", "0")
.style("padding", "0 10px")
.style("z-index", "999");
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments