Popover

<script lang="ts">
  import { Popover } from '@skeletonlabs/skeleton-svelte';
  import IconX from 'lucide-svelte/icons/x';

  let openState = $state(false);

  function popoverClose() {
    openState = false;
  }
</script>

<Popover
  open={openState}
  onOpenChange={(e) => (openState = e.open)}
  positioning={{ placement: 'top' }}
  triggerBase="btn preset-tonal"
  contentBase="card bg-surface-200-800 p-4 space-y-4 max-w-[320px]"
  arrow
  arrowBackground="!bg-surface-200 dark:!bg-surface-800"
>
  {#snippet trigger()}Click Me{/snippet}
  {#snippet content()}
    <header class="flex justify-between">
      <p class="font-bold text-xl">Popover Example</p>
      <button class="btn-icon hover:preset-tonal" onclick={popoverClose}><IconX /></button>
    </header>
    <article>
      <p class="opacity-60">
        This will display a basic popover with a header and body. This also includes a title, description, and close button.
      </p>
    </article>
  {/snippet}
</Popover>

// Use the following settings to populate the `positioning` component property.
// See also: https://floating-ui.com/docs/middleware

export type PositioningOptions = {
  /** Whether the popover should be hidden when the reference element is detached */
    hideWhenDetached?: boolean;
    /** The strategy to use for positioning */
    strategy?: "absolute" | "fixed";
    /** The initial placement of the floating element */
    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
    /** The offset of the floating element */
    offset?: {  mainAxis?: number; crossAxis?: number; };
    /** The main axis offset or gap between the reference and floating elements */
    gutter?: number;
    /** The secondary axis offset or gap between the reference and floating elements */
    shift?: number;
    /** The virtual padding around the viewport edges to check for overflow */
    overflowPadding?: number;
    /** The minimum padding between the arrow and the floating element's corner. */
    arrowPadding?: number;
    /** Whether to flip the placement */
    flip?: boolean | Placement[];
    /** Whether the popover should slide when it overflows. */
    slide?: boolean;
    /** Whether the floating element can overlap the reference element */
    overlap?: boolean;
    /** Whether to make the floating element same width as the reference element */
    sameWidth?: boolean;
    /** Whether the popover should fit the viewport. */
    fitViewport?: boolean;
    /** The overflow boundary of the reference element */
    boundary?: () => Boundary;
    /** Options to activate auto-update listeners */
    listeners?: boolean | AutoUpdateOptions;
    /** Function called when the placement is computed */
    onComplete?(data: ComputePositionReturn): void;
    /** Function called when the floating element is positioned or not */
    onPositioned?(data: {  placed: boolean; }): void;
    /** Function that returns the anchor rect */
    getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
    /** A callback that will be called when the popover needs to calculate its position. */
    updatePosition?: (data: { updatePosition: () => Promise<void>; }) => void | Promise<void>;
}

<script lang="ts">
  import { Tooltip } from '@skeletonlabs/skeleton-svelte';
  let openState = $state(false);
</script>

<Tooltip
  open={openState}
  onOpenChange={(e) => (openState = e.open)}
  positioning={{ placement: 'top' }}
  triggerBase="underline"
  contentBase="card preset-filled p-4"
  openDelay={200}
  arrow
>
  {#snippet trigger()}Hover Me{/snippet}
  {#snippet content()}This is a tooltip.{/snippet}
</Tooltip>

// Use the following settings to populate the `positioning` component property.
// See also: https://floating-ui.com/docs/middleware

export type PositioningOptions = {
  /** Whether the popover should be hidden when the reference element is detached */
    hideWhenDetached?: boolean;
    /** The strategy to use for positioning */
    strategy?: "absolute" | "fixed";
    /** The initial placement of the floating element */
    placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
    /** The offset of the floating element */
    offset?: {  mainAxis?: number; crossAxis?: number; };
    /** The main axis offset or gap between the reference and floating elements */
    gutter?: number;
    /** The secondary axis offset or gap between the reference and floating elements */
    shift?: number;
    /** The virtual padding around the viewport edges to check for overflow */
    overflowPadding?: number;
    /** The minimum padding between the arrow and the floating element's corner. */
    arrowPadding?: number;
    /** Whether to flip the placement */
    flip?: boolean | Placement[];
    /** Whether the popover should slide when it overflows. */
    slide?: boolean;
    /** Whether the floating element can overlap the reference element */
    overlap?: boolean;
    /** Whether to make the floating element same width as the reference element */
    sameWidth?: boolean;
    /** Whether the popover should fit the viewport. */
    fitViewport?: boolean;
    /** The overflow boundary of the reference element */
    boundary?: () => Boundary;
    /** Options to activate auto-update listeners */
    listeners?: boolean | AutoUpdateOptions;
    /** Function called when the placement is computed */
    onComplete?(data: ComputePositionReturn): void;
    /** Function called when the floating element is positioned or not */
    onPositioned?(data: {  placed: boolean; }): void;
    /** Function that returns the anchor rect */
    getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
    /** A callback that will be called when the popover needs to calculate its position. */
    updatePosition?: (data: { updatePosition: () => Promise<void>; }) => void | Promise<void>;
}