Tooltip

popover="manual" plus hover/focus. Inverted colors (foreground fill). Paste the markup first. Same helper as Popover — copy src/components/ui/Place.svelte. title is still fine when you do not need the styled hint.

Preview

Markup

<button class="button button-outline" type="button" aria-describedby="tip">Hover</button>
<div id="tip" popover="manual" class="tooltip" data-side="top">Add to library</div>

Imported

<script>
	import { tip_enter, tip_leave, hide_on_escape } from './ui/Place.svelte';
	let tip;
</script>

<button
	class="button button-outline"
	type="button"
	aria-describedby="tip"
	onmouseenter={(event) => tip_enter(event, tip)}
	onmouseleave={(event) => tip_leave(event, tip)}
	onfocus={(event) => tip_enter(event, tip, 0)}
	onblur={(event) => tip_leave(event, tip, 0)}
	onkeydown={(event) => hide_on_escape(event, tip)}
>Hover</button>
<div id="tip" bind:this={tip} popover="manual" class="tooltip" data-side="top">Add to library</div>