Tooltips in Zoomable Map

Community Help
1

I am trying to improve a symbol map I created, but I find that the locations of the tooltips change a lot when I zoom in on the map. They are not always close to the circles on the map. I wonder how I can make sure the tooltips are always next to the circle.

The following line in the zoon function doesn’t do anything to the tooltips.

tooltip.attr(
     "transform",
     `translate(${path_points.centroid(d)[0]}, ${
          path_points.centroid(d)[1]
     })`
);
1 Like
2

You might use a tooltip library like TippyJS. This has several nice features:

  • It’s highly customizable
  • It deals with placement automatically which, as your question suggests, is a trickier general problem than many folks realize.

I sent you a suggestion illustrating how to use Tippy in this case:

Alternatively, you might just stick with the HTML titles that you already have, though I guess you’d want to add that “Number of research papers…” business. The advantages there are

  • It’s very lightweight
  • Produces native system tooltips
  • Preserved on export to SVG.

Personally, I like the TippyJS option and use it frequently.

1 Like