时间戳

首页 > 解决方案 > Svelte：如何在嵌套组件上实现 use:tippy

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

问题描述

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

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

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

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

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

标签： javascriptsvelte

解决方案

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







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

推荐阅读