Svelte：如何在嵌套组件上实现 use:tippy

Question

I've found the svelte-tippy implementation of the tooltip library Tippy.js which I understand is a Svelte Action, ie 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.

Answer 1

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,
          });