Popover

Native popover (top layer, light dismiss, Escape). Paste the markup first. Copy src/components/ui/Place.svelte and call on_toggle so the panel sits next to its trigger (Popover). data-side is top / bottom / start / end. data-align is start / middle / end.

Preview

Markup

<button class="button button-outline" type="button" popovertarget="dims">Open popover</button>
<div id="dims" popover class="popover" data-side="bottom" data-align="start">
	<div class="popover-header">
		<div class="popover-title">Dimensions</div>
		<p class="popover-description">Set the dimensions for the layer.</p>
	</div>
	<div class="field">
		<label class="label" for="width">Width</label>
		<input class="input" id="width" value="100%">
	</div>
</div>

Imported

<script>
	import { on_toggle } from './ui/Place.svelte';
</script>

<button class="button button-outline" type="button" popovertarget="dims">Open popover</button>
<div id="dims" popover class="popover" data-side="bottom" data-align="start" ontoggle={on_toggle}>
	<div class="popover-header">
		<div class="popover-title">Dimensions</div>
		<p class="popover-description">Set the dimensions for the layer.</p>
	</div>
	<div class="field">
		<label class="label" for="width">Width</label>
		<input class="input" id="width" value="100%">
	</div>
</div>