Popper

Popper provides a utility for positioning floating elements relative to reference elements, commonly used for tooltips, dropdowns, and other overlay content.

Key Features

• Dynamic Positioning:Automatically positions content relative to a reference element.
• Flexible Placement:Supports multiple placement options including top, bottom, left, right, and their variations.
• Click Outside:Built-in click-outside detection to automatically close the popper.
• Slot-based Content:Flexible content management through Vue slots for both trigger and content.
• Accessibility:ARIA-compliant for better accessibility support.

Basic Usage

A basic popper requires a trigger element and content to display.

<template>
  <spr-popper
    id="basic-example"
    distance="4"
    placement="bottom"
    :triggers="[]"
    :popper-hide-triggers="[]"
    :auto-hide="false"
    :delay="0"
  >
    <spr-button>Click for Menu</spr-button>
    <template #content>
      <div class="spr-bg-white spr-rounded-lg spr-p-4 spr-shadow-lg">
        <h3 class="spr-mb-2 spr-text-lg spr-font-medium">Menu Options</h3>
        <ul class="spr-space-y-2">
          <li class="spr-hover:bg-gray-50 spr-flex spr-items-center spr-gap-2 spr-rounded spr-p-2">
            <Icon icon="ph:user" class="spr-h-5 spr-w-5" />
            <span>Profile</span>
          </li>
          <li class="spr-hover:bg-gray-50 spr-flex spr-items-center spr-gap-2 spr-rounded spr-p-2">
            <Icon icon="ph:gear" class="spr-h-5 spr-w-5" />
            <span>Settings</span>
          </li>
          <li class="spr-hover:bg-gray-50 spr-flex spr-items-center spr-gap-2 spr-rounded spr-p-2">
            <Icon icon="ph:sign-out" class="spr-h-5 spr-w-5" />
            <span>Logout</span>
          </li>
        </ul>
      </div>
    </template>
  </spr-popper>
</template>

<script setup>
import { Icon } from '@iconify/vue';
</script>

Placement

The popper can be positioned in different locations relative to the trigger element.

<template>
  <spr-popper id="top-popper" placement="top">
    <spr-button tone="information">
      <template #prefix-icon>
        <Icon icon="ph:arrow-up" />
      </template>
      Top Popper
    </spr-button>
    <template #content>
      <div class="spr-bg-white spr-flex spr-items-center spr-gap-2 spr-rounded-lg spr-p-3 spr-shadow-lg">
        <Icon icon="ph:info" class="spr-h-5 spr-w-5 spr-text-blue-500" />
        <span>Top positioned content</span>
      </div>
    </template>
  </spr-popper>

  <!-- Similar for right, bottom, and left -->
</template>

<script setup>
import { Icon } from '@iconify/vue';
</script>

API Reference

Props

Name	Description	Type	Default
id	Unique identifier for the popper container. Required for proper functionality.	string	-
placement	Determines the position of the popper relative to its reference element. Supports: 'auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'	string	'bottom'
triggers	Array of events that will trigger the popper to show. Common values include: click: Shows on click hover: Shows on mouse enter focus: Shows on focus touch: Shows on touch events Empty array means manual control through v-model.	string[]	['click']
popper-hide-triggers	Array of events that will trigger the popper to hide. Uses the same values as triggers. Empty array means manual control.	string[]	['click']
auto-hide	When true, the popper will automatically hide when clicking outside of it.	boolean	true
delay	Delay in milliseconds before showing/hiding the popper. Useful for hover interactions.	number	0
distance	Distance in pixels between the popper and its reference element.	number | string	"4"

Slots

Name	Description
default	The trigger element that will show/hide the popper content when clicked.
content	The content to be displayed in the popper when triggered.

Product Uses