mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-15 20:13:45 +00:00
Josh Creek
40 lines
741 B
Svelte
40 lines
741 B
Svelte
<script lang="ts">
|
|
let show = false;
|
|
|
|
function handleClick() {
|
|
show = !show;
|
|
}
|
|
</script>
|
|
|
|
<div class="relative inline-block">
|
|
<button
|
|
type="button"
|
|
class="tooltip-trigger cursor-pointer bg-transparent border-0 p-0 appearance-none"
|
|
aria-expanded={show}
|
|
on:click={handleClick}
|
|
on:mouseenter={() => (show = true)}
|
|
on:mouseleave={() => (show = false)}
|
|
>
|
|
<slot name="hover-target" />
|
|
</button>
|
|
|
|
{#if show}
|
|
<div class="tooltip-content absolute z-10 mt-2 w-52">
|
|
<slot name="tooltip" />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.tooltip-content {
|
|
@apply bg-gray-800 text-white text-sm p-2 rounded shadow-lg;
|
|
}
|
|
|
|
.tooltip-trigger:hover + .tooltip-content {
|
|
display: block;
|
|
}
|
|
.tooltip-content {
|
|
display: none;
|
|
}
|
|
</style>
|