Popover 2

An element that floats above other content.

Code

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

  let anchor = $state<HTMLDivElement>();
</script>

<div bind:this={anchor}>(anchor div)</div>

<Button popovertarget="ExamplePopover">Toggle</Button>

<Popover2 id="ExamplePopover" {anchor} anchorOrigin="top-left" lightDismiss="false" offsetX="0" offsetY="0" placement="auto">
 sterling-svelte
</Popover2>

Members

Property Name	Type	Bindable	Default	Comment
allowFlip	Popover2FlipAxis \| undefined	no	undefined	Which axis/axes allow the popover to flip to the other side when there is not enough space.
anchor	HTMLElement \| null \| undefined	no	undefined	The element the popover uses to position itself.
anchorOrigin	Popover2Nonant \| undefined	no	'auto'	The point in a 3x3 grid on the anchor that should be used as the origin.
invoker	HTMLElement \| null \| undefined	no	undefined	The element that controls opening/closing the popover. If the anchor is not specified, the invoker is used as the anchor.
lightDismiss	boolean \| null \| undefined	no	true	When true, this popover closes when another element is clicked or focused. Also closes when another popover opens.
offsetX	number	no	0	The how many pixels to move the popover left (negative) or right (positive).
offsetY	number	no	0	The how many pixels to move the popover up (negative) or down (positive).
open	boolean \| null \| undefined	yes	false	When true, the popover is open and visible.
placement	'auto'\| Popover2Nonant \| undefined	no	'center'	How the popover should be positioned relative to the anchor point. When 'auto', placement follows anchorOrigin.

Types

	Type Name	Definition	Comment
	Popover2Nonant	'top-left' \| 'top' \| 'top-right' \| 'left' \| 'center' \| 'right' \| 'bottom-left' \| 'bottom' \| 'bottom-right'	A nonant is like quadrant but 3x3 rather than 2x2.
	Popover2FlipAxis	'none' \| 'x' \| 'y' \| 'both'

Considerations

Uses the w3c standard Popover API to place the popover on the top layer.
This component manages CSS anchor-name and position-anchor properties to connect the specified anchor to the popover.
The position-try CSS for popovers does not currently work so this component implement position flipping.
Includes HTMLDivElement props, events, and methods.

Anatomy

<div 
  class="sterling-popover-2 light-dismiss has-anchor-ident"
  style="--anchor-ident:anchor-123 --offset-x:calc(0% + 15px); --offset-y:calc(0% + 0px);"
  data-placement="top-left"
  data-anchor-origin="top-left"
  popover="auto">
    <div class="content">
      {@render children?.()}
    </div>
</div>