Callout

A floating box of content with an arrow pointing at the reference element.

Code

<script lang="ts">
  import { Callout } from '@geoffcox/sterling-svelte';
  
  let reference: HTMLElement;
</script>

<div bind:this={reference}>
  <!-- TODO: the reference element content -->
</div>

<Callout open {reference}>
  <!-- TODO: the callout content -->
</Callout>

Members

Property Name	Type	Default	Comment
conditionalRender	boolean \| null \| undefined	true	Conditionally renders content based on open
crossAxisOffset	number \| undefined	0	The offset along the side of the reference element
mainAxisOffset	number \| undefined	0	The offset towards or away from the side of the reference element
open	boolean \| null \| undefined	false	When true, the callout is open and visible
placement	PopoverPlacement \| undefined	'top-start'	How the callout 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 callout

Considerations

Use Popover for floating content without the Callout style.
Includes HTMLDivElement props, events, and methods.

Anatomy

portal (<div>)
callout (<div>)
  children (Snippet)
  arrow (<div>)