トランジションやアニメーションと同様に、アクションは引数を取ることができます。アクション関数は、それが属する要素と一緒に、この引数と共に呼び出されます。
この演習では、Tippy.js ライブラリを使用して、<button> にツールチップを追加します。アクションは既に use:tooltip で接続されていますが、ボタンにカーソルを合わせるか、キーボードでフォーカスしても、ツールチップにはコンテンツが表示されません。
まず、アクションは Tippy に渡すオプションを返す関数を、引数として受け入れる必要があります。
App
function tooltip(node, fn) {
$effect(() => {
const tooltip = tippy(node, fn());
return tooltip.destroy;
});
}
tooltip関数はオプションが変更されても再実行されないため、オプション自体ではなく関数を渡しています。
次に、オプションをアクションに渡す必要があります。
App
<button use:tooltip={() => ({ content })}>
Hover me
</button>Svelte 4 では、アクションは
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>