Popover

<afp-popover>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A popover that anchors to another element and can be triggered by click, hover, focus, or programmatic manuals.

When you click on a trigger element, a popover appears showing interactive content. Unlike simple tooltips, these can include things like links, buttons, or form fields. They show up without any background overlay and disappear if you click elsewhere or hit the Escape key. Only one popover remains visible at a time.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<afp-popover for="popover-general" placement="right">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</afp-popover>

<afp-button id="popover-general">Show popover</afp-button>

<afp-popover [for]="'popover-general'" [placement]="'right'">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</afp-popover>

<afp-button [id]="'popover-general'">Show popover</afp-button>

<AfpPopover for="popover-general" placement="right">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</AfpPopover>

<AfpButton id="popover-general">Show popover</AfpButton>

<AfpPopover :for="'popover-general'" :placement="'right'">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</AfpPopover>

<AfpButton :id="'popover-general'">Show popover</AfpButton>

Examples #

Opening #

A popover appears when its trigger element is clicked. You can also manage its visibility through code by toggling the open property between true and false.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

<afp-popover for="popover-opening" placement="right" open>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</afp-popover>

<afp-button id="popover-opening">Show popover</afp-button>

<afp-popover [for]="'popover-opening'" [placement]="'right'" open>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</afp-popover>

<afp-button [id]="'popover-opening'">Show popover</afp-button>

<AfpPopover for="popover-opening" placement="right" open>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</AfpPopover>

<AfpButton id="popover-opening">Show popover</AfpButton>

<AfpPopover :for="'popover-opening'" :placement="'right'" open>
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>
</AfpPopover>

<AfpButton :id="'popover-opening'">Show popover</AfpButton>

Closing #

To make a button inside a popover close it automatically, add the attribute data-popover="close".

<afp-popover for="popover-closing" placement="top">
  <div class="afp-stack popover-example">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad blanditiis error facilis ipsam iure, maiores modi omnis perspiciatis quae similique sint ullam voluptatibus, voluptatum?
    <afp-button data-popover="close" variant="brand">Close popover manual</afp-button>
  </div>
</afp-popover>

<afp-button id="popover-closing">Show popover</afp-button>

<afp-popover [for]="'popover-closing'" [placement]="'top'">
  <div class="afp-stack popover-example">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad blanditiis error facilis ipsam iure, maiores modi omnis perspiciatis quae similique sint ullam voluptatibus, voluptatum?
    <afp-button [data-popover]="'close'" [variant]="'brand'">Close popover manual</afp-button>
  </div>
</afp-popover>

<afp-button [id]="'popover-closing'">Show popover</afp-button>

<AfpPopover for="popover-closing" placement="top">
  <div class="afp-stack popover-example">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad blanditiis error facilis ipsam iure, maiores modi omnis perspiciatis quae similique sint ullam voluptatibus, voluptatum?
    <AfpButton data-popover="close" variant="brand">Close popover manual</AfpButton>
  </div>
</AfpPopover>

<AfpButton id="popover-closing">Show popover</AfpButton>

<AfpPopover :for="'popover-closing'" :placement="'top'">
  <div class="afp-stack popover-example">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad blanditiis error facilis ipsam iure, maiores modi omnis perspiciatis quae similique sint ullam voluptatibus, voluptatum?
    <AfpButton :data-popover="'close'" :variant="'brand'">Close popover manual</AfpButton>
  </div>
</AfpPopover>

<AfpButton :id="'popover-closing'">Show popover</AfpButton>

Placement #

You can specify where the popover appears relative to its trigger element using the placement property

Note that the actual placement may vary as needed to keep the panel inside of the viewport. If set to an empty array ([]), it enables auto placement. If containing more than two items, it is automatically restricted to the provided placements. You can also input a space-separated string.

Available placements #

The following placement options are supported and can be combined to control both direction and alignment:

Primary Direction	Variants
`top`	`top-start`, `top-end`
`right`	`right-start`, `right-end`
`bottom`	`bottom-start`, `bottom-end`
`left`	`left-start`, `left-end`

Examples #

<div class="afp-cluster">
  <!-- Top -->
  <afp-popover for="popover-placement-top" placement="top">
    <div class="popover-example" style="width: auto">I'm on the top</div>
  </afp-popover>
  <afp-button id="popover-placement-top">Top</afp-button>
  
  <!-- Bottom -->
  <afp-popover for="popover-placement-bottom" placement="bottom">
    <div class="popover-example" style="width: auto">I'm at the bottom</div>
  </afp-popover>
  <afp-button id="popover-placement-bottom">Bottom</afp-button>
  
  <!-- Left -->
  <afp-popover for="popover-placement-left" placement="left">
    <div class="popover-example" style="width: auto">I'm on the left</div>
  </afp-popover>
  <afp-button id="popover-placement-left">Left</afp-button>
  
  <!-- Right -->
  <afp-popover for="popover-placement-right" placement="right">
    <div class="popover-example" style="width: auto">I'm on the right</div>
  </afp-popover>
  <afp-button id="popover-placement-right">Right</afp-button>
</div>

<div class="afp-cluster">
  <!-- Top -->
  <afp-popover [for]="'popover-placement-top'" [placement]="'top'">
    <div class="popover-example" style="width: auto">I'm on the top</div>
  </afp-popover>
  <afp-button [id]="'popover-placement-top'">Top</afp-button>
  
  <!-- Bottom -->
  <afp-popover [for]="'popover-placement-bottom'" [placement]="'bottom'">
    <div class="popover-example" style="width: auto">I'm at the bottom</div>
  </afp-popover>
  <afp-button [id]="'popover-placement-bottom'">Bottom</afp-button>
  
  <!-- Left -->
  <afp-popover [for]="'popover-placement-left'" [placement]="'left'">
    <div class="popover-example" style="width: auto">I'm on the left</div>
  </afp-popover>
  <afp-button [id]="'popover-placement-left'">Left</afp-button>
  
  <!-- Right -->
  <afp-popover [for]="'popover-placement-right'" [placement]="'right'">
    <div class="popover-example" style="width: auto">I'm on the right</div>
  </afp-popover>
  <afp-button [id]="'popover-placement-right'">Right</afp-button>
</div>

<div class="afp-cluster">
  <!-- Top -->
  <AfpPopover for="popover-placement-top" placement="top">
    <div class="popover-example" style="width: auto">I'm on the top</div>
  </AfpPopover>
  <AfpButton id="popover-placement-top">Top</AfpButton>
  
  <!-- Bottom -->
  <AfpPopover for="popover-placement-bottom" placement="bottom">
    <div class="popover-example" style="width: auto">I'm at the bottom</div>
  </AfpPopover>
  <AfpButton id="popover-placement-bottom">Bottom</AfpButton>
  
  <!-- Left -->
  <AfpPopover for="popover-placement-left" placement="left">
    <div class="popover-example" style="width: auto">I'm on the left</div>
  </AfpPopover>
  <AfpButton id="popover-placement-left">Left</AfpButton>
  
  <!-- Right -->
  <AfpPopover for="popover-placement-right" placement="right">
    <div class="popover-example" style="width: auto">I'm on the right</div>
  </AfpPopover>
  <AfpButton id="popover-placement-right">Right</AfpButton>
</div>

<div class="afp-cluster">
  <!-- Top -->
  <AfpPopover :for="'popover-placement-top'" :placement="'top'">
    <div class="popover-example" style="width: auto">I'm on the top</div>
  </AfpPopover>
  <AfpButton :id="'popover-placement-top'">Top</AfpButton>
  
  <!-- Bottom -->
  <AfpPopover :for="'popover-placement-bottom'" :placement="'bottom'">
    <div class="popover-example" style="width: auto">I'm at the bottom</div>
  </AfpPopover>
  <AfpButton :id="'popover-placement-bottom'">Bottom</AfpButton>
  
  <!-- Left -->
  <AfpPopover :for="'popover-placement-left'" :placement="'left'">
    <div class="popover-example" style="width: auto">I'm on the left</div>
  </AfpPopover>
  <AfpButton :id="'popover-placement-left'">Left</AfpButton>
  
  <!-- Right -->
  <AfpPopover :for="'popover-placement-right'" :placement="'right'">
    <div class="popover-example" style="width: auto">I'm on the right</div>
  </AfpPopover>
  <AfpButton :id="'popover-placement-right'">Right</AfpButton>
</div>

Offset #

Use the offset.mainAxis, offset.crossAxis and offset.alignmentAxis to control how far the popover appears from its anchor.

mainAxis offset changed to 20

crossAxis offset changed to 40

alignmentAxis offset changed to 20

<div class="afp-cluster">
  <!-- offset.mainAxis -->
  <afp-popover for="popover-offset-main" placement="top" offset='{"mainAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>mainAxis</code> offset changed to <code>20</code></div>
  </afp-popover>
  <afp-button id="popover-offset-main">mainAxis</afp-button>

  <!-- offset.crossAxis -->
  <afp-popover for="popover-offset-cross" placement="bottom" offset='{"crossAxis": 40}'>
    <div class="popover-example" style="width: auto"><code>crossAxis</code> offset changed to <code>40</code></div>
  </afp-popover>
  <afp-button id="popover-offset-cross">crossAxis</afp-button>

  <!-- offset.alignmentAxis -->
  <afp-popover for="popover-offset-alignment" placement="right-start" offset='{"alignmentAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>alignmentAxis</code> offset changed to <code>20</code></div>
  </afp-popover>
  <afp-button id="popover-offset-alignment">alignmentAxis</afp-button>
</div>

<div class="afp-cluster">
  <!-- offset.mainAxis -->
  <afp-popover [for]="'popover-offset-main'" [placement]="'top'" offset='{"mainAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>mainAxis</code> offset changed to <code>20</code></div>
  </afp-popover>
  <afp-button [id]="'popover-offset-main'">mainAxis</afp-button>

  <!-- offset.crossAxis -->
  <afp-popover [for]="'popover-offset-cross'" [placement]="'bottom'" offset='{"crossAxis": 40}'>
    <div class="popover-example" style="width: auto"><code>crossAxis</code> offset changed to <code>40</code></div>
  </afp-popover>
  <afp-button [id]="'popover-offset-cross'">crossAxis</afp-button>

  <!-- offset.alignmentAxis -->
  <afp-popover [for]="'popover-offset-alignment'" [placement]="'right-start'" offset='{"alignmentAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>alignmentAxis</code> offset changed to <code>20</code></div>
  </afp-popover>
  <afp-button [id]="'popover-offset-alignment'">alignmentAxis</afp-button>
</div>

<div class="afp-cluster">
  <!-- offset.mainAxis -->
  <AfpPopover for="popover-offset-main" placement="top" offset='{"mainAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>mainAxis</code> offset changed to <code>20</code></div>
  </AfpPopover>
  <AfpButton id="popover-offset-main">mainAxis</AfpButton>

  <!-- offset.crossAxis -->
  <AfpPopover for="popover-offset-cross" placement="bottom" offset='{"crossAxis": 40}'>
    <div class="popover-example" style="width: auto"><code>crossAxis</code> offset changed to <code>40</code></div>
  </AfpPopover>
  <AfpButton id="popover-offset-cross">crossAxis</AfpButton>

  <!-- offset.alignmentAxis -->
  <AfpPopover for="popover-offset-alignment" placement="right-start" offset='{"alignmentAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>alignmentAxis</code> offset changed to <code>20</code></div>
  </AfpPopover>
  <AfpButton id="popover-offset-alignment">alignmentAxis</AfpButton>
</div>

<div class="afp-cluster">
  <!-- offset.mainAxis -->
  <AfpPopover :for="'popover-offset-main'" :placement="'top'" offset='{"mainAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>mainAxis</code> offset changed to <code>20</code></div>
  </AfpPopover>
  <AfpButton :id="'popover-offset-main'">mainAxis</AfpButton>

  <!-- offset.crossAxis -->
  <AfpPopover :for="'popover-offset-cross'" :placement="'bottom'" offset='{"crossAxis": 40}'>
    <div class="popover-example" style="width: auto"><code>crossAxis</code> offset changed to <code>40</code></div>
  </AfpPopover>
  <AfpButton :id="'popover-offset-cross'">crossAxis</AfpButton>

  <!-- offset.alignmentAxis -->
  <AfpPopover :for="'popover-offset-alignment'" :placement="'right-start'" offset='{"alignmentAxis": 20}'>
    <div class="popover-example" style="width: auto"><code>alignmentAxis</code> offset changed to <code>20</code></div>
  </AfpPopover>
  <AfpButton :id="'popover-offset-alignment'">alignmentAxis</AfpButton>
</div>

Strategy #

By default, the popover uses the absolute positioning strategy. You can change it to fixed if needed.

I'm using absolute positioning strategy

I'm using fixed positioning strategy

<div class="afp-cluster">
  <!-- Absolute -->
  <afp-popover for="popover-strategy-absolute" placement="top" strategy="absolute">
    <div class="popover-example" style="width: auto">I'm using <code>absolute</code> positioning strategy</div>
  </afp-popover>
  <afp-button id="popover-strategy-absolute">Absolute</afp-button>

  <!-- Fixed -->
  <afp-popover for="popover-strategy-fixed" placement="top" strategy="fixed">
    <div class="popover-example" style="width: auto">I'm using <code>fixed</code> positioning strategy</div>
  </afp-popover>
  <afp-button id="popover-strategy-fixed">Fixed</afp-button>
</div>

<div class="afp-cluster">
  <!-- Absolute -->
  <afp-popover [for]="'popover-strategy-absolute'" [placement]="'top'" [strategy]="'absolute'">
    <div class="popover-example" style="width: auto">I'm using <code>absolute</code> positioning strategy</div>
  </afp-popover>
  <afp-button [id]="'popover-strategy-absolute'">Absolute</afp-button>

  <!-- Fixed -->
  <afp-popover [for]="'popover-strategy-fixed'" [placement]="'top'" [strategy]="'fixed'">
    <div class="popover-example" style="width: auto">I'm using <code>fixed</code> positioning strategy</div>
  </afp-popover>
  <afp-button [id]="'popover-strategy-fixed'">Fixed</afp-button>
</div>

<div class="afp-cluster">
  <!-- Absolute -->
  <AfpPopover for="popover-strategy-absolute" placement="top" strategy="absolute">
    <div class="popover-example" style="width: auto">I'm using <code>absolute</code> positioning strategy</div>
  </AfpPopover>
  <AfpButton id="popover-strategy-absolute">Absolute</AfpButton>

  <!-- Fixed -->
  <AfpPopover for="popover-strategy-fixed" placement="top" strategy="fixed">
    <div class="popover-example" style="width: auto">I'm using <code>fixed</code> positioning strategy</div>
  </AfpPopover>
  <AfpButton id="popover-strategy-fixed">Fixed</AfpButton>
</div>

<div class="afp-cluster">
  <!-- Absolute -->
  <AfpPopover :for="'popover-strategy-absolute'" :placement="'top'" :strategy="'absolute'">
    <div class="popover-example" style="width: auto">I'm using <code>absolute</code> positioning strategy</div>
  </AfpPopover>
  <AfpButton :id="'popover-strategy-absolute'">Absolute</AfpButton>

  <!-- Fixed -->
  <AfpPopover :for="'popover-strategy-fixed'" :placement="'top'" :strategy="'fixed'">
    <div class="popover-example" style="width: auto">I'm using <code>fixed</code> positioning strategy</div>
  </AfpPopover>
  <AfpButton :id="'popover-strategy-fixed'">Fixed</AfpButton>
</div>

Duration #

You can adjust the duration for which the popover is visible/invisible (in milliseconds) using the duration property.

<afp-popover for="popover-duration" placement="top" duration="1000">
  <div class="popover-example" style="width: auto">I will hide and show after 1 second</div>
</afp-popover>

<afp-button id="popover-duration">Show popover</afp-button>

<afp-popover [for]="'popover-duration'" [placement]="'top'" [duration]=1000>
  <div class="popover-example" style="width: auto">I will hide and show after 1 second</div>
</afp-popover>

<afp-button [id]="'popover-duration'">Show popover</afp-button>

<AfpPopover for="popover-duration" placement="top" duration="1000">
  <div class="popover-example" style="width: auto">I will hide and show after 1 second</div>
</AfpPopover>

<AfpButton id="popover-duration">Show popover</AfpButton>

<AfpPopover :for="'popover-duration'" :placement="'top'" :duration=1000>
  <div class="popover-example" style="width: auto">I will hide and show after 1 second</div>
</AfpPopover>

<AfpButton :id="'popover-duration'">Show popover</AfpButton>

Trigger #

You can control how the popover is activated using the trigger property. Possible options include click, hover, focus, and manual. Multiple options can be passed by separating them with a space. When manual is used, the popover must be activated programmatically.

I'm triggered by click

Click

I'm triggered by hover

Hover

I'm triggered by focus

Focus

<div class="afp-cluster">
  <!-- Click -->
  <afp-popover for="popover-trigger-click" placement="top" trigger="click">
    <div class="popover-example" style="width: auto">I'm triggered by <code>click</code></div>
  </afp-popover>
  <afp-button id="popover-trigger-click">Click</afp-button>
  
  <!-- Hover -->
  <afp-popover for="popover-trigger-hover" placement="top" trigger="hover">
    <div class="popover-example" style="width: auto">I'm triggered by <code>hover</code></div>
  </afp-popover>
  <afp-button id="popover-trigger-hover">Hover</afp-button>
  
  <!-- Focus -->
  <afp-popover for="popover-trigger-focus" placement="top" trigger="focus">
    <div class="popover-example" style="width: auto">I'm triggered by <code>focus</code></div>
  </afp-popover>
  <afp-button id="popover-trigger-focus">Focus</afp-button>
</div>

<div class="afp-cluster">
  <!-- Click -->
  <afp-popover [for]="'popover-trigger-click'" [placement]="'top'" [trigger]="'click'">
    <div class="popover-example" style="width: auto">I'm triggered by <code>click</code></div>
  </afp-popover>
  <afp-button [id]="'popover-trigger-click'">Click</afp-button>
  
  <!-- Hover -->
  <afp-popover [for]="'popover-trigger-hover'" [placement]="'top'" [trigger]="'hover'">
    <div class="popover-example" style="width: auto">I'm triggered by <code>hover</code></div>
  </afp-popover>
  <afp-button [id]="'popover-trigger-hover'">Hover</afp-button>
  
  <!-- Focus -->
  <afp-popover [for]="'popover-trigger-focus'" [placement]="'top'" [trigger]="'focus'">
    <div class="popover-example" style="width: auto">I'm triggered by <code>focus</code></div>
  </afp-popover>
  <afp-button [id]="'popover-trigger-focus'">Focus</afp-button>
</div>

<div class="afp-cluster">
  <!-- Click -->
  <AfpPopover for="popover-trigger-click" placement="top" trigger="click">
    <div class="popover-example" style="width: auto">I'm triggered by <code>click</code></div>
  </AfpPopover>
  <AfpButton id="popover-trigger-click">Click</AfpButton>
  
  <!-- Hover -->
  <AfpPopover for="popover-trigger-hover" placement="top" trigger="hover">
    <div class="popover-example" style="width: auto">I'm triggered by <code>hover</code></div>
  </AfpPopover>
  <AfpButton id="popover-trigger-hover">Hover</AfpButton>
  
  <!-- Focus -->
  <AfpPopover for="popover-trigger-focus" placement="top" trigger="focus">
    <div class="popover-example" style="width: auto">I'm triggered by <code>focus</code></div>
  </AfpPopover>
  <AfpButton id="popover-trigger-focus">Focus</AfpButton>
</div>

<div class="afp-cluster">
  <!-- Click -->
  <AfpPopover :for="'popover-trigger-click'" :placement="'top'" :trigger="'click'">
    <div class="popover-example" style="width: auto">I'm triggered by <code>click</code></div>
  </AfpPopover>
  <AfpButton :id="'popover-trigger-click'">Click</AfpButton>
  
  <!-- Hover -->
  <AfpPopover :for="'popover-trigger-hover'" :placement="'top'" :trigger="'hover'">
    <div class="popover-example" style="width: auto">I'm triggered by <code>hover</code></div>
  </AfpPopover>
  <AfpButton :id="'popover-trigger-hover'">Hover</AfpButton>
  
  <!-- Focus -->
  <AfpPopover :for="'popover-trigger-focus'" :placement="'top'" :trigger="'focus'">
    <div class="popover-example" style="width: auto">I'm triggered by <code>focus</code></div>
  </AfpPopover>
  <AfpButton :id="'popover-trigger-focus'">Focus</AfpButton>
</div>

Hover delay #

When using the hover trigger, you can set a delay (in milliseconds) before the popover appears or disappears using the hoverDelay (hover-delay) property.

I will show after 500ms of hovering and hide after 500ms of unhovering

<afp-popover for="popover-hover-delay" placement="top" trigger="hover" hover-delay="500">
  <div class="popover-example">
    I will show after <code>500ms</code> of hovering and hide after <code>500ms</code> of unhovering
  </div>
</afp-popover>
<afp-button id="popover-hover-delay">Hover me</afp-button>

<afp-popover [for]="'popover-hover-delay'" [placement]="'top'" [trigger]="'hover'" [hover-delay]=500>
  <div class="popover-example">
    I will show after <code>500ms</code> of hovering and hide after <code>500ms</code> of unhovering
  </div>
</afp-popover>
<afp-button [id]="'popover-hover-delay'">Hover me</afp-button>

<AfpPopover for="popover-hover-delay" placement="top" trigger="hover" hover-delay="500">
  <div class="popover-example">
    I will show after <code>500ms</code> of hovering and hide after <code>500ms</code> of unhovering
  </div>
</AfpPopover>
<AfpButton id="popover-hover-delay">Hover me</AfpButton>

<AfpPopover :for="'popover-hover-delay'" :placement="'top'" :trigger="'hover'" :hover-delay=500>
  <div class="popover-example">
    I will show after <code>500ms</code> of hovering and hide after <code>500ms</code> of unhovering
  </div>
</AfpPopover>
<AfpButton :id="'popover-hover-delay'">Hover me</AfpButton>

Manual control #

When using the manual trigger, you can programmatically show or hide the popover using its show(), hide() and toggle() methods.

Toggle

<div class="afp-stack">
  <afp-popover id="manualPopover" for="popover-manual" placement="right" trigger="manual">
    <div class="popover-example" style="width: auto">I'm controlled manually</div>
  </afp-popover>

  <div id="popover-manual" class="popover-content-example">Content</div>
  
  <div class="afp-cluster afp-gap-2xs">
    <afp-button onclick="manualPopover.show()" appearance="filled" shape="pill"><afp-icon name="eye"></afp-icon></afp-button>
    <afp-button onclick="manualPopover.hide()" appearance="filled" shape="pill"><afp-icon name="eye-slash"></afp-icon></afp-button>
    <afp-button onclick="manualPopover.toggle()" appearance="filled" shape="pill"><afp-icon name="toggles"></afp-icon> Toggle</afp-button>
  </div>
</div>

<div class="afp-stack">
  <afp-popover [id]="'manualPopover'" [for]="'popover-manual'" [placement]="'right'" [trigger]="'manual'">
    <div class="popover-example" style="width: auto">I'm controlled manually</div>
  </afp-popover>

  <div id="popover-manual" class="popover-content-example">Content</div>
  
  <div class="afp-cluster afp-gap-2xs">
    <afp-button [onclick]="'manualPopover.show()'" [appearance]="'filled'" [shape]="'pill'"><afp-icon [name]="'eye'"></afp-icon></afp-button>
    <afp-button [onclick]="'manualPopover.hide()'" [appearance]="'filled'" [shape]="'pill'"><afp-icon [name]="'eye-slash'"></afp-icon></afp-button>
    <afp-button [onclick]="'manualPopover.toggle()'" [appearance]="'filled'" [shape]="'pill'"><afp-icon [name]="'toggles'"></afp-icon> Toggle</afp-button>
  </div>
</div>

<div class="afp-stack">
  <AfpPopover id="manualPopover" for="popover-manual" placement="right" trigger="manual">
    <div class="popover-example" style="width: auto">I'm controlled manually</div>
  </AfpPopover>

  <div id="popover-manual" class="popover-content-example">Content</div>
  
  <div class="afp-cluster afp-gap-2xs">
    <AfpButton onclick="manualPopover.show()" appearance="filled" shape="pill"><AfpIcon name="eye"></AfpIcon></AfpButton>
    <AfpButton onclick="manualPopover.hide()" appearance="filled" shape="pill"><AfpIcon name="eye-slash"></AfpIcon></AfpButton>
    <AfpButton onclick="manualPopover.toggle()" appearance="filled" shape="pill"><AfpIcon name="toggles"></AfpIcon> Toggle</AfpButton>
  </div>
</div>

<div class="afp-stack">
  <AfpPopover :id="'manualPopover'" :for="'popover-manual'" :placement="'right'" :trigger="'manual'">
    <div class="popover-example" style="width: auto">I'm controlled manually</div>
  </AfpPopover>

  <div id="popover-manual" class="popover-content-example">Content</div>
  
  <div class="afp-cluster afp-gap-2xs">
    <AfpButton :onclick="'manualPopover.show()'" :appearance="'filled'" :shape="'pill'"><AfpIcon :name="'eye'"></AfpIcon></AfpButton>
    <AfpButton :onclick="'manualPopover.hide()'" :appearance="'filled'" :shape="'pill'"><AfpIcon :name="'eye-slash'"></AfpIcon></AfpButton>
    <AfpButton :onclick="'manualPopover.toggle()'" :appearance="'filled'" :shape="'pill'"><AfpIcon :name="'toggles'"></AfpIcon> Toggle</AfpButton>
  </div>
</div>

Auto focus #

When a popover is displayed, it automatically focuses on the first focusable element within its content. You can also set the autofocus HTML property.

Properties

Learn more about properties.

Name Description Reflects

for

The id of the element the popover should anchor to.

Type string

open

Whether the popover is currently open.

Type boolean

Default false

noAutoFocus
noautofocus

If true, the popover will not automatically focus the first focusable element when opened.

Type boolean

Default false

trigger

Determines when the popover appears. Multiple triggers can be combined: `click hover focus manual`. When `manual` is included, the popover is fully programmatically controlled.

Type

AfpTrigger

Name	Description
`HOVER`	Hover trigger generated when the user hovers over an element.
`FOCUS`	Focus trigger generated when an element gains focus.
`CLICK`	Click trigger generated when an element is clicked.
`MANUAL`	Manual trigger that requires explicit control.

AfpTrigger

Default [AfpTrigger.CLICK]

strategy

Positioning strategy for the popover. Either `absolute` or `fixed`.

Type

AfpStrategy

Name	Description
`ABSOLUTE`	Positioning using absolute positioning.
`FIXED`	Positioning using fixed positioning.

AfpStrategy

Default AfpStrategy.ABSOLUTE

placement

The preferred placement of the popover. Note that the actual placement may vary as needed to keep the panel inside of the viewport. If set to an empty array ([]), it enables auto placement. If containing more than two items, it is automatically restricted to the provided placements. You can also input a space-separated string.

Type

AfpPlacement

Name	Description
`TOP`	Top placement.
`RIGHT`	Right placement.
`BOTTOM`	Bottom placement.
`LEFT`	Left placement.
`TOP_START`	Top-start placement.
`TOP_END`	Top-end placement.
`RIGHT_START`	Right-start placement.
`RIGHT_END`	Right-end placement.
`BOTTOM_START`	Bottom-start placement.
`BOTTOM_END`	Bottom-end placement.
`LEFT_START`	Left-start placement.
`LEFT_END`	Left-end placement.

AfpPlacement

Default []

matchWidth
matchwidth

If true, the popover will match the width of its anchor element.

Type boolean

Default false

offset

Offset configuration for positioning.

Type

AfpOffset

Name	Description
`mainAxis`	type: `number`
`crossAxis`	type: `number`
`alignmentAxis`	type: `number \| null`

AfpOffset

Default { mainAxis: 8, crossAxis: 0, alignmentAxis: 0, }

duration

Animation duration in milliseconds.

Type number

Default 150

hoverDelay
hoverdelay

Delay in milliseconds before closing on hover out.

Type number

Default 150

Methods

Learn more about using methods.

Name	Description	Arguments
`show`	Opens the popover programmatically. Return `void`	-
`hide`	Closes the popover programmatically and restores focus to the anchor if not in `"manual"` mode. Return `void`	-
`toggle`	Toggles the popover open or closed programmatically. Return `void`	-

Events

Learn more about events.

Name	Return	Description
`afp-show`	`void`	Emitted when the popover is shown.
`afp-after-show`	`void`	Emitted after the popover has been shown.
`afp-hide`	`void`	Emitted when the popover is hidden.
`afp-after-hide`	`void`	Emitted after the popover has been hidden.

Slots

Learn more about slots.

Name	Description
`default`	The default slot containing the popover’s content.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The popover container element.	`::part(base)`

CSS Custom Properties

Name	Description	Default
`--afp-popover-scale`	The scale of the popover when closed.	`0.9`

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/popover/popover.js';