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

Question

我发现工具提示库Tippy.js的svelte-tippy实现，我理解它是一个 Svelte Action，即它使用use:tippy属性，如下所示：

<button use:tippy={props}>
  Hover me
</button>

我将如何 go 关于为热图实现 Tippy.js 工具提示？ 配置（至少， true / false用于使用工具提示，还有一些模板或Cell用于实际工具提示内容）将发生在顶级组件（ SvelteHeatmap ），但实际实现将发生在代表日， Month或Week组件，分别在两者之间，并且将基于顶层提供的配置。

由于我想为Svelte Heatmap组件建议一个拉取请求，但我只是一个 Svelte 初学者，我想获得一些关于它如何工作或应该如何工作的通用解释。 官方文档有一些关于 Actions 的信息，但并不是这类事情的最佳实践（虽然我可能错了）。

注意我已经进行了基本测试，以确保它适用于 SVG ，它确实如此。

Answer 1

我找不到任何可以清楚地解释如何做到这一点的东西。 经过一番摆弄后，我想出了这个用法

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