assets/js/map/tooltip.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

import * as d3 from "https://cdn.jsdelivr.net/npm/d3@7/+esm";

let tooltip;

export function initTooltip() {
	tooltip = d3.select("body")
		.append("div")
		.attr("class", "map-tooltip");
}

export function attachTooltip(selection, getContent) {
	selection
		.on("mouseover", (event, d) => {
			const content = getContent(event, d);
			if (content) {
				tooltip.style("opacity", 1).html(content);
			} else {
				tooltip.style("opacity", 0);
			}
		})
		.on("mousemove", (event) => {
			tooltip
				.style("left", (event.pageX + 12) + "px")
				.style("top", (event.pageY - 28) + "px");
		})
		.on("mouseout", () => {
			tooltip.style("opacity", 0);
		});
}