Popover

An element that floats abover other content.

Code

<script lang="ts">
  import { Popover } from '@geoffcox/sterling-svelte';

  let reference: HTMLElement;

</script>

<div bind:this={reference}>Anchor for the popover position.</div>

<Popover bind:open {reference}>
  sterling-svelte
</Popover>

Members

Property Name	Type	Bindable	Default	Comment
conditionalRender	boolean \| null \| undefined	no	true	When true, content is rendered only when the popover is open.
crossAxisOffset	number	no	0	The offset along the side of the reference element.
mainAxisOffset	number	no	0	The offset towards or away from the side of the reference element.
open	boolean \| null \| undefined	no	false	When true, the popover is open and visible.
placement	PopoverPlacement \| undefined	no	'top-start'	How the popover should be positioned relative to the reference element.
portalHost	HTMLElement \| undefined	no	undefined	The host container for the callout.
reference	HTMLElement \| undefined	no	undefined	The reference to the element anchoring the position of the popover.

Types

	Type Name	Definition	Comment
	PopoverPlacement	'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-end' \| 'bottom' \| 'bottom-start' \| 'left-end' \| 'left' \| 'left-start'

Considerations

Floats content above the page via use:portal. Elements are moved to the end of the `body` element so they appear above them in the z-order.
Popover does not provide any styling (background, border, etc.) around the floating content.

Anatomy

<div class="sterling-popover-portal">
  <div class="sterling-popover">
    {@render children()}
  </div>
</div>