Lithesome

Hovercard

Display a summary/preview of a link.

Preview
Code

Basic Example

<script>
	import { Hovercard, HovercardArrow, HovercardContent, HovercardTrigger } from 'lithesome';
</script>

<Hovercard>
	<HovercardTrigger>Hover me</HovercardTrigger>
	<HovercardContent>
		<HovercardArrow />
		Content
	</HovercardContent>
</Hovercard>

API Reference

<Hovercard />

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

StateTypeDescription
visiblebooleanTrue if the contents are visible.

<HovercardTrigger />

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

StateTypeDescription
visiblebooleanTrue if the contents are visible.

<HovercardContent />

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

StateTypeDescription
visiblebooleanTrue if the contents are visible.

<HovercardArrow />

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

StateTypeDescription
visiblebooleanTrue if the contents are visible.