46 lines
798 B
Svelte
46 lines
798 B
Svelte
<script lang="ts">
|
|
let isHovered = false;
|
|
let x: number;
|
|
let y: number;
|
|
|
|
function mouseOver(event: MouseEvent) {
|
|
isHovered = true;
|
|
x = event.pageX + 5;
|
|
y = event.pageY + 5;
|
|
}
|
|
function mouseMove(event: MouseEvent) {
|
|
x = event.pageX + 5;
|
|
y = event.pageY + 5;
|
|
}
|
|
function mouseLeave() {
|
|
isHovered = false;
|
|
}
|
|
</script>
|
|
|
|
<span
|
|
on:mouseover={mouseOver}
|
|
on:mouseleave={mouseLeave}
|
|
on:mousemove={mouseMove}
|
|
>
|
|
<slot />
|
|
</span>
|
|
|
|
{#if isHovered}
|
|
<div
|
|
style="top: {y}px; left: {x}px;"
|
|
class="tooltip"
|
|
>
|
|
<slot name="title"></slot>
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.tooltip {
|
|
position: absolute;
|
|
padding: 8px 16px;
|
|
background-color: theme(colors.slate.900);
|
|
border: 1px solid theme(colors.slate.500);
|
|
border-radius: 8px;
|
|
}
|
|
</style>
|