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}>The reference anchor for positioning the callout.</div>

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

Members

Property Name	Type	Default	Comment
conditionalRender	boolean	true	Conditionally renders content based on 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 callout is open and visible
placement	PopoverPlacement	'top-start'	How the callout should be positioned relative to the reference element
portalHost	HTMLElement	undefined	The host container for the callout
reference	HTMLElement	undefined	The reference to the element anchoring the position of the callout
variant	string	''	Additional class names to apply

Considerations

The Popover component provides floating content without the Callout style.
Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-callout-portal">
<div class="sterling-callout">
  <slot />
  <div class="arrow" />
</div>
</div>