Popover

Content that floats abover other content

Code

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

  let reference: HTMLElement;

</script>

<div bind:this={reference}>The reference anchor for positioning the popover.</div>

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

Members

Property Name	Type	Default	Comment
conditionalRender	boolean	true	When true, content is rendered only when the popover is open.
crossAxisOffset	number	0	The offset along the side of the reference element.
mainAxisOffset	number	0	The offset towards or away from the side of the reference element.
open	boolean	false	When true, the popover is open and visible.
placement	PopoverPlacement	'bottom-start'	How the popover should be positioned relative to the reference element.
portalHost	HTMLElement \| undefined	undefined	The host container for the callout.
reference	HTMLElement \| undefined	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" use:portal>
  <div class="sterling-popover">
    <slot {open} {variant} />
  </div>
</div>