Q: Svelte: How to implement use:tippy on a nested component I've found the svelte-tippy implementation of the tooltip library Tippy.js which I understand is a Svelte Action, i.e. it uses the use:tippy attribute, like this:
<button use:tippy={props}>
  Hover me
</button>

How would I go about implementing a Tippy.js tooltip for a heatmap?  The configuration (at least, true/false for using tooltips, but also some template or function for the actual tooltip contents) would happen at the top-level component (SvelteHeatmap), but the actual implementation would happen on the Cell level which represents a day, with the Month or Week components, respectively, in between, and would be based on the configuration provided on the top-level.
As I would like to suggest a Pull Request for the Svelte Heatmap component but am only a Svelte beginner, I'd like to get some generic explanation as to how this works, or should work. The official documentation has some info on Actions, but not really a best practice for this kind of thing (I may be wrong about this though).
Note I've made a basic test to make sure this works with SVG, it does.

A: I couldn't find anything really that would clearly explain how to do this. After some fiddling I came up with this use



<div id="my_selector"></div>

<div id="nested_elements"> 
    <button>Option_1</button>
    <button>Option_2</button>
    <button>Option_3</button>
</div>


<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>








tippy('#my_selector', {
            content: document.querySelector('#nested_elements').innerHTML,
            interactive: true,
            allowHTML: true,
          });





