block by tonyhschu b8306da7114d1772e740dbb45058a8dc

Foreign Object Tooltip Sadness

Full Screen

The <foreignObject> tag has so much potential for making tooltips in <svg> much easier to create, but right now it seems like it needs some love on the CSS support front.

In this block, I demonstrated a couple approaches that we tried for using <foreignObject> to place an HTML element inside SVG. It doesn’t quite do what we would expect (i.e. place the HTML in an absolutely positioned way relative to the top left of the <foreignObject>)

How might we fix this? Does this have to wait for browser implementors?

Built with blockbuilder.org

index.html