Tooltip

<script lang="ts">
	import { Tooltip } from 'radix-svelte';
	import type { ResolvedProps } from 'radix-svelte/internal/helpers';
	// These are internal icons, but they're not exported from the package.
	// Use your own icons instead.
	import Plus from '~icons/lucide/plus';

	let providerDelayDuration: number = 700;
	let providerSkipDelayDuration: number = 300;
	let providerDisableHoverableContent: boolean;
	let rootOpen: boolean;
	let rootDelayDuration: number = 700;
	let rootDisableHoverableContent: boolean;
	let portalContainer: HTMLElement | string;
	let contentSide = "top";
	let contentSideOffset: number;
	let contentAlign = "center";
	let contentAlignOffset: number;
	let contentArrowPadding: number;
	let contentCollisionPadding: number;
	let contentSticky = "partial";
	let contentHideWhenDetached: boolean;
	let contentAvoidCollisions: boolean = true;
	let arrowWidth: number = 10;
	let arrowHeight: number = 5;
</script>

<Tooltip.Provider
	delayDuration={providerDelayDuration}
	skipDelayDuration={providerSkipDelayDuration}
	disableHoverableContent={providerDisableHoverableContent}
>
	<Tooltip.Root
		bind:open={rootOpen}
		delayDuration={rootDelayDuration}
		disableHoverableContent={rootDisableHoverableContent}
	>
		<Tooltip.Trigger
			class="hover:opacity/75 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white
			text-vermilion-500 shadow-sm outline-none focus:ring focus:ring-black"
			aria-label="Add to library"
		>
			<Plus />
		</Tooltip.Trigger>
		<Tooltip.Portal>
			<Tooltip.Content
				side={contentSide}
				sideOffset={contentSideOffset}
				align={contentAlign}
				alignOffset={contentAlignOffset}
				arrowPadding={contentArrowPadding}
				collisionPadding={contentCollisionPadding}
				sticky={contentSticky}
				hideWhenDetached={contentHideWhenDetached}
				avoidCollisions={contentAvoidCollisions}
				class="select-none rounded-md
				bg-white px-4
				py-2 leading-none text-vermilion-500 shadow-md will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade 
				data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
			>
				Add to library

				<Tooltip.Arrow
					width={arrowWidth}
					height={arrowHeight}
					class="fill-white"
				/>
			</Tooltip.Content>
		</Tooltip.Portal>
	</Tooltip.Root>
</Tooltip.Provider>