You're missing the necessary CSS to position the
I know this doesn't require so much of explanation but I haven't been on SO since a while so just trying to getting back into the groove. :p
Anyway, if you're positioning the div by d3.event.pageX and d3.event.pageY, here's how it'll look:
var margin = {top:20, right: 20, bottom: 20, left: 20};
var svg = d3.select("#visualisation")
.append("svg")
.attr("width", 960)
.attr("height", 600);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("circle")
.attr("class", "circle")
.attr("cx", 200)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "red")
.style("opacity", 0.5);
var tooltip = d3.select("#visualisation")
.append("div").classed('tooltip', true)
.style("visibility", "hidden");
d3.select(".circle")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout)
function mouseover() {
d3.select(this)
.transition()
.duration(500)
.style("opacity", "1");
tooltip
.style("visibility", "visible")
// .style("opacity", 1)
}
function mousemove() {
tooltip.html("is it visible?")
.style("left", d3.event.pageX+'px')//(d3.select(this).attr("cx")) + "px")
.style("top", d3.event.pageY+'px') //(d3.select(this).attr("cy")) + "px")
}
function mouseout() {
d3.select(this)
.transition()
.duration(500)
.style("opacity", 0.5);
tooltip
.style("visibility", "hidden")
// .style("opacity", 0);
}
div#visualisation div.tooltip {
position: absolute;
pointer-events: none;
}
If you're positioning it at a particular x,y (as in your snippet), it'll look like the following snippet:
var margin = {top:20, right: 20, bottom: 20, left: 20};
var svg = d3.select("#visualisation")
.append("svg")
.attr("width", 960)
.attr("height", 600);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
g.append("circle")
.attr("class", "circle")
.attr("cx", 200)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "red")
.style("opacity", 0.5);
var tooltip = d3.select("#visualisation")
.append("div").classed('tooltip', true)
.style("visibility", "hidden");
d3.select(".circle")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout)
function mouseover() {
d3.select(this)
.transition()
.duration(500)
.style("opacity", "1");
tooltip
.style("visibility", "visible")
// .style("opacity", 1)
}
function mousemove() {
tooltip.html("is it visible?")
.style("left", (d3.select(this).attr("cx")) + "px")
.style("top", (d3.select(this).attr("cy")) + "px")
}
function mouseout() {
d3.select(this)
.transition()
.duration(500)
.style("opacity", 0.5);
tooltip
.style("visibility", "hidden")
// .style("opacity", 0);
}
div#visualisation div.tooltip {
position: absolute;
pointer-events: none;
}
Additions:
Added a class 'tooltip' to this tooltip div.
Added pointer-events: none; to avoid flickering of the tooltip (take it out and you'll notice the difference)
Hope this helps.