与过渡和动画一样，操作可以接受一个参数，操作函数将与其所属的元素一起调用。

¥Like transitions and animations, an action can take an argument, which the action function will be called with alongside the element it belongs to.

在这个练习中，我们想使用 Tippy.js 库向 <button> 添加工具提示。该操作已与 use:tooltip 连接，但如果你将鼠标悬停在按钮上（或使用键盘将其聚焦），工具提示将不包含任何内容。

¥In this exercise, we want to add a tooltip to the <button> using the Tippy.js library. The action is already wired up with use:tooltip, but if you hover over the button (or focus it with the keyboard) the tooltip contains no content.

首先，操作需要接受一个函数返回一些要传递给 Tippy 的选项：

¥First, the action needs to accept a function that returns some options to pass to Tippy:

function tooltip(node, fn) {
	$effect(() => {
		const tooltip = tippy(node, fn());

		return tooltip.destroy;
	});
}

我们传入一个函数，而不是选项本身，因为 tooltip 函数不会在选项更改时重新运行。

¥[!NOTE] We’re passing in a function, rather than the options themselves, because the tooltip function does not re-run when the options change.

然后，我们需要将选项传递到操作中：

¥Then, we need to pass the options into the action:

<button use:tooltip={() => ({ content })}>
	Hover me
</button>

在 Svelte 4 中，操作返回一个具有 update 和 destroy 方法的对象。这仍然有效，但我们建议改用 $effect，因为它提供了更大的灵活性和粒度。

¥[!NOTE] In Svelte 4, actions returned an object with update and destroy methods. This still works but we recommend using $effect instead, as it provides more flexibility and granularity.