Tooltip - Lithesome

Preview

Code

<script lang="ts">
	import { fly } from 'svelte/transition';
	import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from 'lithesome';
	import { Button } from '$site/index.js';
</script>

<Tooltip
	floatingConfig={{
		offset: 15,
		placement: 'top'
	}}
>
	<TooltipTrigger>
		{#snippet custom({ props })}
			<Button variant="primary" {...props}>Hover me</Button>
		{/snippet}
	</TooltipTrigger>

	<TooltipContent>
		{#snippet custom({ props, state })}
			{#if state.visible}
				<div
					transition:fly={{ duration: 150, y: 5 }}
					{...props}
					class="rounded-md bg-white px-3 py-1.5 text-sm text-black shadow-md dark:bg-zinc-800 dark:text-white"
				>
					<TooltipArrow class="size-3 rotate-45 bg-white dark:bg-zinc-800" />
					Howdy!
				</div>
			{/if}
		{/snippet}
	</TooltipContent>
</Tooltip>

Basic Example

<script>
	import { Tooltip, TooltipArrow, TooltipContent, TooltipTrigger } from 'lithesome';
</script>

<Tooltip>
	<TooltipTrigger>Hover me</TooltipTrigger>
	<TooltipContent>
		<TooltipArrow />
		Howdy!
	</TooltipContent>
</Tooltip>

API Reference

Property	Type	Description
`delay`	number \| [ number, number ]	The delay in `ms` in which it will take for the content show. Passing a number will set both in and out delays.\ Passing an array of two indexes will apply the `[in, out]` delays.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`visible`	boolean	The current visibility of the contents.
`disabled`	boolean	Disables the entire component tree.
`portalTarget`	HTMLElement \| string	The DOM target to mount the content to.
`floatingConfig`	FloatingConfig	The underlying FloatingUI config.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<TooltipTrigger />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<TooltipContent />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<TooltipArrow />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

Lithesome

Basic Example

API Reference

<Tooltip />

<TooltipTrigger />

<TooltipContent />

<TooltipArrow />