# Tooltips in Zoomable Map

**URL:** <https://talk.observablehq.com/t/tooltips-in-zoomable-map/5631>\
**Category:** Help\
**Created:** [September 29, 2021, 4:15am UTC](https://talk.observablehq.com/t/tooltips-in-zoomable-map/5631 "2021-09-29T04:15:36Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![haoshuai](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/haoshuai/32/3757_2.png) [@haoshuai](https://talk.observablehq.com/u/haoshuai)\
**Post date:** [September 29, 2021, 4:15am UTC](https://talk.observablehq.com/t/tooltips-in-zoomable-map/5631/1 "2021-09-29T04:15:36Z")

</div>

I am trying to improve [a symbol map](https://observablehq.com/d/279bb990ccaadb26) 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.

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

```

---

<div class="post-metadata">

**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\
**Post date:** [September 29, 2021, 9:59am UTC](https://talk.observablehq.com/t/tooltips-in-zoomable-map/5631/2 "2021-09-29T09:59:17Z")

</div>

You might use a tooltip library like [TippyJS](https://atomiks.github.io/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:

> **[Symbol Map](https://observablehq.com/d/d399d5b36326962c)**

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.