In this codepen, clicking on a node causes a popover to appear. Eventually, I want links and clickable things to be in the popover. Problem is, right now when you click it, the popover closes.
I'm using an onclick event so when you click anywhere (HTML body), the popover closes. I prefer this over say an "x" close button in the popover, but I don't know how to uninclude the popover in this click to close event.
d3.select("body").on("click", function() {
console.log("click on body")
tooltip.style("opacity", 0)
tooltip.style("visibility", "hidden")
})
I thought maybe the d3 stopPropagation event on the "tooltip" would somehow come into play here, but I'm not sure.
Thanks for any help!
The way most websites handle this is by adding both a popover and a background overlay, and then only registering clicks to the background overlay.
For example:
d3.select("circle")
.on("click", clickNode);
var tooltipBg = d3
.select(".tooltip-overlay")
.on("click", clickBackground);
var tooltip = d3.select(".tooltip");
function clickNode(event) {
const [x, y] = d3.pointer(event);
tooltipBg.style("display", "block");
tooltip
.style("left", `${event.layerX}px`)
.style("top", `${event.layerY}px`)
.style("display", "block")
.transition()
.duration(300)
.style("opacity", 1);
}
function clickBackground() {
tooltipBg.style("display", "none");
tooltip
.transition()
.duration(300)
.style("opacity", 0)
.on("end", () => tooltip.style("display", "none"));
}.tooltip-overlay {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
opacity: 0;
display: none;
}
.tooltip {
position: absolute;
padding: 12px;
z-index: 10;
border: solid 2px red;
width: 200px;
height: 100px;
background-color: white;
border-radius: 5px;
box-shadow: 6px solid #eee;
opacity: 0;
display: none;
}<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
<svg height="500" width="500">
<circle r="20" cy="50" cx="50"></circle>
</svg>
<div class="tooltip-overlay"></div>
<div class="tooltip"></div>