krz/world-incarceration

 1import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";
 2
 3let tooltip;
 4
 5export function initTooltip() {
 6	tooltip = d3.select("body")
 7		.append("div")
 8		.attr("class", "map-tooltip");
 9}
10
11export function attachTooltip(selection, getContent) {
12	selection
13		.on("mouseover", (event, d) => {
14			const content = getContent(event, d);
15			if (content) {
16				tooltip.style("opacity", 1).html(content);
17			} else {
18				tooltip.style("opacity", 0);
19			}
20		})
21		.on("mousemove", (event) => {
22			tooltip
23				.style("left", (event.pageX + 12) + "px")
24				.style("top", (event.pageY - 28) + "px");
25		})
26		.on("mouseout", () => {
27			tooltip.style("opacity", 0);
28		});
29}