Popover

# Features

• Trigger and popover are automatically associated semantically using ARIA for improved accessibility.
• Popover can be closed by interacting outside of it or pressing the Escape key.
• Focus is moved and contained within the popover while it is open, and returned to the trigger element when it is closed.
• Customization options for side, alignment, offsets, and collision handling.

# Dependencies

This module depends on focus-trap and @floating-ui/dom.

# Anatomy

Typically, a popover consists of:

• Trigger: The element that triggers the popover.
• Popover: The overlay, which is positioned relative to the trigger, and may contain
  • Close Button: An optional element to close the popover.
  • Arrow: An optional element that points to the trigger.

<script>
	import { createPopover } from '@grail-ui/svelte';

	const { usePopoverTrigger, triggerAttrs, usePopover, popoverAttrs, closeButtonAttrs, open } = createPopover();
</script>

<button use:usePopoverTrigger {...$triggerAttrs}>Click</button>

{#if $open}
	<section use:usePopover {...$popoverAttrs}>
		<div>
			Content
		</div>
		<button {...$closeButtonAttrs}>Close</button>
	</section>
{/if}

# Examples

# Changing placement

To change the placement of the popover relatively to the trigger, set the positioning property.

createPopover({
	
positioning: {
		
placement: "top-start",
		
gutter: 10
	
},
})

# Custom portal container

If you want to customize the element that your popover portals into, use the portal and pass the actual element or a CSS selector.

createPopover({
	
positioning: {
		
placement: "top-start",
	
},
	
portal: '#custom',
})

# Accessibility

# Keyboard Interactions

# API

# PopoverConfig

# PopoverReturn

# PositioningOptions