floating-runes

When to use

Use this skill when working with floating UI patterns in Svelte 5: tooltips, dropdowns, context menus, toasts, overlays, portals, singleton patterns, or virtual positioning.

Core rules (always follow)

• Import everything from floating-runes (types and runtime). Avoid @floating-ui/* imports.
• Prefer Svelte 5 runes and actions (use:float, use:float.ref, use:float.virtual, use:float.arrow).
• Keep floating elements in the DOM only when needed (conditional rendering).
• Preserve accessibility: proper roles, keyboard escape handling, and focus behavior.

Quick navigation

• DOs: references/DO.md
• DONTs: references/DONT.md
• Examples: references/EXAMPLES.md
• Workflows: references/WORKFLOWS.md

Minimal usage example

<script lang='ts'>
	import floatingUI, { flip, shift, offset, type Placement } from 'floating-runes'
	const float = floatingUI({ placement: 'top', middleware: [offset(6), flip(), shift()] })
</script>

<button use:float.ref>Hover me</button>
{#if float.referenced}
	<div use:float role='tooltip'>Tooltip</div>
{/if}

Singleton quickstart

<script module lang='ts'>
	import { createSingleton, offset, flip, shift, arrow } from 'floating-runes'
	export const tooltip = createSingleton({
		placement: 'top',
		middleware: [offset(8), flip(), shift(), arrow()],
		showDelay: 200
	})
</script>

<script lang='ts'>
	import { portal } from 'floating-runes'
</script>

{#if tooltip.visible && tooltip.content}
	<div use:tooltip.float use:portal>
		{tooltip.content}
		<div use:tooltip.arrow></div>
	</div>
{/if}

Use elsewhere:

<script>
	import { tooltip } from './TooltipRoot.svelte'
</script>

<button use:tooltip={'Save'}>Save</button>