Tooltip

A popup that displays additonal information when hovering or focusing an element.

<script lang="ts">
	import { Tooltip, TooltipTrigger, TooltipContent, TooltipArrow } from 'lithesome';
	import { cn } from '$site/utils.js';
	import { InfoIcon } from 'lucide-svelte';
	import { fly } from 'svelte/transition';
</script>

<Tooltip delay={[200, 0]}>
	<TooltipTrigger>
		<button class="flex size-12 rounded hover:bg-black/10 hover:text-black dark:hover:bg-white/5 dark:hover:text-white">
			<InfoIcon class="m-auto w-8" />
		</button>
	</TooltipTrigger>
	<TooltipContent
		transition={[fly, { y: 5, duration: 200 }]}
		offset={10}
		placement="top"
		class={cn(
			'origin-bottom rounded-md border p-2 text-sm shadow-md',
			'border-neutral-300 bg-white shadow-neutral-200',
			'dark:border-neutral-700 dark:bg-neutral-900 dark:shadow-[#111]'
		)}
	>
		<TooltipArrow
			class={cn(
				'absolute bottom-0 bg-white dark:bg-neutral-900',
				'size-2 rotate-45 border-b border-r border-neutral-300 dark:border-neutral-700'
			)}
		/>
		Tooltip Content!
	</TooltipContent>
</Tooltip>

API Reference

Popover

Prop	Type	Description
`visible`	`boolean` `Default: false`	Controlled state of the tooltip content.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the tooltip content is visible or not.

Data attribute	Value	Description
`data-popover`	`''`	The base data attribute, can be used for styling.
`data-state`	`'opened' \| 'closed'`

PopoverTrigger

This component is a child of Popover

Child prop	Type	Description
`visible`	`boolean`	Whether or not the tooltip content is visible or not.

Data attribute	Value	Description
`data-popovertrigger`	`''`	The base data attribute, can be used for styling.

PopoverContent

This component is a child of Popover

Prop	Type	Description
`placement`	`Placement` `Default: bottom`	The FloatingUI placement string.
`constrainViewport`	`boolean` `Default: false`	Keeps the content dropdown from ever growing outside of the viewport.
`sameWidth`	`boolean` `Default: false`	Makes the content dropdown the same width as the trigger.
`portalTarget`	`strng \| HTMLElement` `Default: 'body'`	The target position for the content to be mounted.
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Child prop	Type	Description
`visible`	`boolean`	Whether or not the tooltip content is visible or not.

Data attribute	Value	Description
`data-popovercontent`	`''`	The base data attribute, can be used for styling.

PopoverArrow

This component is a child of PopoverContent

Prop	Type	Description
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.

Data attribute	Value	Description
`data-popoverarrow`	`''`	The base data attribute, can be used for styling.
`data-side`	`'top' \| 'right' \| 'bottom' \| 'left'`

Basic Example

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

<Tooltip>
	<TooltipTrigger>
		<button></button>
	</TooltipTrigger>
	<TooltipContent>
		<TooltipArrow />
	</TooltipContent>
</Tooltip>

Hovering the tooltip usually is almost never needed as it’s main purpose is to display information and not intended to be intracted with.

If hovering the tooltip is required, I suggest you view the Hovercard component.
It’ll allow for hovering the content without it disappearing upon hovering.