<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-4 w-[240px] 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>