トランジションとアニメーションと同じように、アクションは引数を取ることができます。その引数と、アクション関数自身が属する要素を以って、アクション関数は呼び出されます。
この演習では、Tippy.js ライブラリを使って <button> にツールチップを追加したいと思います。アクションはすでに use:tooltip によって紐付けられていますが、ボタンをホバーしても (キーボードでフォーカスしても) ツールチップには何も表示されません。
最初に、アクションでオプションを受け取り、それを Tippy に渡さなければなりません:
App.svelte
function tooltip(node, options) {
const tooltip = tippy(node, options);
return {
destroy() {
tooltip.destroy();
}
};
}それから、オプションをアクションに渡します:
App.svelte
<button use:tooltip={{ content, theme: 'material' }}>
Hover me
</button>これでツールチップが動作します — ほとんどは。<input> のテキストを変更しても、ツールチップに新しい内容が反映されません。update メソッドを追加し、オブジェクトを返すことでこれを修正します。
App.svelte
function tooltip(node, options) {
const tooltip = tippy(node, options);
return {
update(options) {
tooltip.setProps(options);
},
destroy() {
tooltip.destroy();
}
};
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
import 'tippy.js/themes/material.css';
let content = 'Hello!';
function tooltip(node) {const tooltip = tippy(node);
return { destroy() {tooltip.destroy();
}
};
}
</script>
<input bind:value={content} /><button use:tooltip>
Hover me
</button>