与过渡和动画一样， action 可以接受一个参数，该参数将与其所属的元素一起传递给 action 函数。
在这个练习中，我们想要使用 Tippy.js 库为 <button> 添加一个工具提示。action 已经通过 use:tooltip 连接好了，但是当你将鼠标悬停在按钮上（或使用键盘聚焦）时，工具提示不包含任何内容。
首先，action 需要接受一个函数，该函数返回一些要传递给 Tippy 的选项：
App
function tooltip(node, fn) {
$effect(() => {
const tooltip = tippy(node, fn());
return tooltip.destroy;
});
}我们传入的是一个函数，而不是选项本身，这是因为当选项发生变化时，
tooltip函数不会重新运行。
然后，我们需要将选项传递给 action：
App
<button use:tooltip={() => ({ content })}>
Hover me
</button>在 Svelte 4 中，action 返回一个包含
update和destroy方法的对象。这种方式仍然可以使用，但我们建议使用$effect，因为它提供了更多的灵活性和细粒度控制。
上一页 下一页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
import tippy from 'tippy.js';
let content = $state('Hello!'); function tooltip(node) { $effect(() => {const tooltip = tippy(node);
return tooltip.destroy;
});
}
</script>
<input bind:value={content} /><button use:tooltip>
Hover me
</button>
<style>
:global { [data-tippy-root] {--bg: #666;
background-color: var(--bg);
color: white;
border-radius: 0.2rem;
padding: 0.2rem 0.6rem;
filter: drop-shadow(1px 1px 3px rgb(0 0 0 / 0.1));
* {transition: none;
}
}
[data-tippy-root]::before {--size: 0.4rem;
content: '';
position: absolute;
left: calc(50% - var(--size));
top: calc(-2 * var(--size) + 1px);
border: var(--size) solid transparent;
border-bottom-color: var(--bg);
}
}
</style>