mirror of
https://github.com/jcreek/LivingDexTracker.git
synced 2026-07-13 11:03:44 +00:00
feat(#46): Add Tooltip component
This commit is contained in:
@@ -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>
|
||||||
Reference in New Issue
Block a user