# tooltips disappear when embedding

**URL:** <https://talk.observablehq.com/t/tooltips-disappear-when-embedding/6928>\
**Category:** Help\
**Created:** [August 16, 2022, 9:26am UTC](https://talk.observablehq.com/t/tooltips-disappear-when-embedding/6928 "2022-08-16T09:26:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![espinielli](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/espinielli/32/142_2.png) [@espinielli](https://talk.observablehq.com/u/espinielli)\
**Post date:** [August 16, 2022, 9:26am UTC](https://talk.observablehq.com/t/tooltips-disappear-when-embedding/6928/1 "2022-08-16T09:26:37Z")

</div>

Hi all,  
I have a notebook with a map with custom tooltips (logo and table for underlying entity when mouseover).  
Here is the notebook (v2221)  
[https://observablehq.com/@espinielli/ansps-ace@2221](https://observablehq.com/@espinielli/ansps-ace@2221)

You can see the tooltips when overing on the different areas.

When I generate the Javascript code for embedding (selecting `map` and `style`), see snapshot, I get tooltips working.

 ![Screenshot 2022-08-16 at 11.14.34](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/0/016bf6420f130b35866bdd487a36056d64985131.jpeg)

That is not the case when I use the javascript code in an HTML page, [https://www.eurocontrol.int/ACE/ACE-Home\_new\_map.html:](https://www.eurocontrol.int/ACE/ACE-Home_new_map.html:) there I see that the relevant DIV for the tooltip is created and filled/changed/… when the mouse hovers on the areas but nothin os visible…

 ![inspect](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/a/a55048e1d95626f0f1beb490d649c8afefc7548c.png)

I see that the whole HTML page changes size, i.e. the tooltip DIV is at the bottom and being filled, but nothing is visible even down there (of course it would be better for it to be visible on the map 🙂 )

Has anybody any experience with tooltips and embedding them?  
Any suggestions as to deal with this?

---

<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:** [August 16, 2022, 10:38am UTC](https://talk.observablehq.com/t/tooltips-disappear-when-embedding/6928/2 "2022-08-16T10:38:30Z")

</div>

Your map and tooltip both seem to embed fine when I use the technique you describe:

[https://wncviz.com/temp/temp.html](https://wncviz.com/temp/temp.html)

---

<div class="post-metadata">

**Author:** ![espinielli](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/espinielli/32/142_2.png) [@espinielli](https://talk.observablehq.com/u/espinielli)\
**Post date:** [August 16, 2022, 12:07pm UTC](https://talk.observablehq.com/t/tooltips-disappear-when-embedding/6928/3 "2022-08-16T12:07:49Z")

</div>

@mcmcclur you are right. That’s exactly what surprises me about my HTML page not working!  
I did put the correct javascript, the DIVs, at runtime the tooltip DIV is changing on mousehover/…

I am really puzzled.

---

<div class="post-metadata">

**Author:** ![espinielli](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/espinielli/32/142_2.png) [@espinielli](https://talk.observablehq.com/u/espinielli)\
**Post date:** [August 17, 2022, 8:38am UTC](https://talk.observablehq.com/t/tooltips-disappear-when-embedding/6928/4 "2022-08-17T08:38:53Z")

</div>

The issue is a class name clash with bootstrap `tooltip`.  
Once I renamed my `tooltip` class to `tooltip_espin` (and reflected in the `<style>` cell) everything works.