How to accurately place a HTML tooltip

Community Help
1

I am trying to create a HTML element tooltip on the data viz. I can successfully create a tooltip with svg element and place it at the exact location I desire.

However, when I try to place the HTML tooltip it fails, even though I am referring to this SVG to DOM Coordinate Conversion for the conversion but it does not seem to place the HTML exactly at the same place as the svg element.

How can I place the HTML tooltip accurately at the same position as svg?

Here is a notebook which does not render for reasons unknown to me.

Thank you in advance.

2

Notebook doesn’t render as your not returning the div, see this notebook to help you get started. Observable’s not JavaScript / Observable / Observable

A made a couple of changes so it displays. HTML Tooltip Issue / Brett Cooper / Observable

The placement looks ok to me.

3

u may try to create a svg, plus html tooltip as foreignObject.
look to SVG foreignObject tooltips in D3 - bl.ocks.org