38 lines
1.0 KiB
Svelte
38 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
export let title: string;
|
|
export let tooltip: string = "";
|
|
</script>
|
|
|
|
<div class="grid grid-cols-2 mt-[5px]">
|
|
|
|
<label>{title}</label>
|
|
<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help justify-self-end">
|
|
<img
|
|
src="/images/question-mark.png"
|
|
alt="?"
|
|
class="w-[20px] h-[20px]"
|
|
/>
|
|
<div class="tooltip">
|
|
<slot></slot>
|
|
<div id="arrow" class="invisible absolute h-3 w-6 bg-inherit before:visible before:absolute before:h-3 before:w-3 right-2 before:rotate-45 before:bg-inherit before:content-['']"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<style lang="postcss">
|
|
label {
|
|
@apply text-base-content text-nowrap justify-self-start -ml-2 mb-1
|
|
[font-size:_clamp(15px,1rem,10px)]
|
|
}
|
|
|
|
|
|
|
|
.tooltip {
|
|
@apply absolute -right-1 max-w-[480px] w-max break-words ring-2 ring-secondary/5 invisible bg-white rounded-lg p-2 shadow-lg top-0 translate-y-[calc(-100%-8px)] transition-all duration-300 opacity-0;
|
|
}
|
|
|
|
.tooltip-opener:hover .tooltip {
|
|
@apply visible opacity-100;
|
|
}
|
|
</style> |