<script lang="ts">
	export let tooltip: string = "";
</script>




<div data-tooltip={tooltip} class="relative tooltip-opener cursor-help">
    <div class="w-full">
        <img
            src="/images/icons/info-mark.svg"
            alt="info"
            class="w-full"
        />
    </div>

    <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>



<style lang="postcss">

	.tooltip {
		@apply absolute z-[10] -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>