feat(#46): Add Tooltip component

This commit is contained in:
Josh Creek
2024-07-17 17:50:03 +01:00
parent c071dca26a
commit 1c207455fb
+37
View File
@@ -0,0 +1,37 @@
<script lang="ts">
let show = false;
function handleClick() {
show = !show;
}
</script>
<div class="relative inline-block">
<div
class="tooltip-trigger cursor-pointer"
on:click={handleClick}
on:mouseenter={() => (show = true)}
on:mouseleave={() => (show = false)}
>
<slot name="hover-target" />
</div>
{#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>