tooltips disappear when embedding

[espinielli]

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

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.

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: 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…

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?

[mcmcclur]

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

https://wncviz.com/temp/temp.html

[espinielli]

@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.

[espinielli]

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.