<script>
import './process.js';
import tippy from 'tippy.js';
function tooltip(node, params) {
let tip = tippy(node, params);
return {
update: (newParams) => {
tip.setProps(newParams);
},
destroy: () => {
tip.destroy();
}
}
}
const placements = ['top', 'right', 'bottom', 'left'];
let selectedPlacement = placements[0];
let message = "I'm a tooltip!";
</script>
<label for="placement">Placement</label>
<select bind:value={selectedPlacement} id="placement">
{#each placements as placement}
<option>{placement}</option>
{/each}
</select>
<label>Message <input bind:value={message} type="text"></label>
<div class="example">
<button use:tooltip={{
content: message,
placement: selectedPlacement
}}>
Hover me