Sure thing, here’s a fixed example: https://beta.observablehq.com/d/8871ebf5dccba557
The gist is:
When you provide a selector to
tippy, the tippy library looks for that element in the current DOM. So when you call
tippy('svg circle', it hunts for a SVG element, and a circle element in it. But in the original code, the SVG element and the circle in it aren’t in your DOM yet - the svg container was created with
DOM.svg(w, h) but won’t get written to the DOM until the cell returns its value.
So, the fix is either to ensure that the element is in the DOM first, or, as my example demonstrates, provide a reference instead of a selector. I’d recommend using references - variables referring to elements - instead of selectors - in this case and most others, because they help you embrace the Observable reactive paradigm, which means that if you eventually include async or generators in notebooks, those references will automatically cause cells to update when they need to update and wait when they need to wait.
Hope that helps! - Tom