See this codepen for a demo of the popovers when you click on a blue node.
I am trying to make the popover close functionality work like the following
- If I click “off” (in some non-interactive space, the background page), close popover.
- If I click another node when an existing popover is open, the existing popover will close and the new popover associated with the just-clicked node will open.
I’ve followed an implementation where an invisible “tooltip-overlay” appears, which supports the click-off to close functionality. But that won’t let me click on other nodes without first hiding the overlay.
clicking a node fires clicknode function, which displays the “tooltip” and the “tooltipBg”
function clicknode(event, nodes) {
const[x, y] = d3.pointer(event);
tooltipBg.style("display", "block");
tooltip
.style("left", `${event.pageX}px`)
.style("top", `${event.pageY}px`)
.transition().duration(1).style("visibility", "visible")
.transition().duration(300).style("opacity", 1)
.style("display", "block");
loadTooltipContent(nodes);
}
Thanks for any help you might have.