Popover

Display a non-modal dialog that floats around a trigger element.

Usage

<template>
  <s-popover>
    <s-button color="white" label="Open" trailing-icon="icon-[heroicons--chevron-down-20-solid]" />
    <template #panel>
      <!-- Content -->
      <div class="p-3">
        Popover Content
      </div>
    </template>
  </s-popover>
</template>

Mode

Use the mode prop to switch between click and hover modes.

<template>
  <s-popover mode="hover">
    <s-button color="white" label="Open" trailing-icon="icon-[heroicons--chevron-down-20-solid]" />
    <template #panel>
      <!-- Content -->
      <div class="p-3">
        Popover Content
      </div>
    </template>
  </s-popover>
</template>