Overlays & Menus

Popover

Added Aug 12, 2026

A button that opens a floating popover panel with a title and description: a simple info/settings card revealed on click. Inspired by the shadcn/ui PopoverBasic composition.

CopySnips Live Preview

How to Use

On the Settings tab, edit the trigger button text, popover title, and description. The Preview tab and the copyable YAML update together.
Paste the YAML into Power Apps Studio (Ctrl+V). Two independent top-level controls are added: btnPopoverTrigger (the button) and conPopoverPanel (the floating panel), positioned directly below it. They are NOT nested, the same trigger+panel pattern used by Combobox/Avatar Dropdown, keeping every size literal instead of computed from cross-referenced siblings.
Click the button to open the popover, click it again to close it. Click-outside-to-close isn't reliably available in Classic Power Apps controls (same limitation as Combobox/Avatar Dropdown).
No OnVisible initialisation needed: the popover starts closed.

Problem Solved

Provides a ready-made trigger+floating-panel pattern for a small info/settings card (a very common UI piece, e.g. quick settings, a details flyout) which Power Apps has no native "popover" control for.

Integration

All content (trigger text, title, description) is plain settings-driven text substituted directly into the copied YAML. Read/write varPopoverOpen to control visibility programmatically, or extend conPopoverHeader with additional fields/controls for a richer popover body.

- btnPopoverTrigger:
    Control: Classic/Button@2.2.0
    Properties:
      Align: =Align.Center
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderStyle: =BorderStyle.Solid
      BorderThickness: =1
      Color: =RGBA(15, 23, 42, 1)
      Fill: =RGBA(255, 255, 255, 1)
      FocusedBorderThickness: =0
      Font: =Font.'Open Sans'
      FontWeight: =FontWeight.Semibold
      HoverBorderColor: =RGBA(148, 163, 184, 1)
      HoverColor: =RGBA(15, 23, 42, 1)
      HoverFill: =RGBA(248, 250, 252, 1)
      OnSelect: =Set(varPopoverOpen, !varPopoverOpen)
      PressedFill: =RGBA(241, 245, 249, 1)
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Size: =11
      Text: ="Edit Profile"
      Height: =36
      Width: =140
      X: =20
      Y: =20
- conPopoverPanel:
    Control: GroupContainer@1.5.0
    Variant: ManualLayout
    Properties:
      BorderColor: =RGBA(226, 232, 240, 1)
      BorderThickness: =1
      DropShadow: =DropShadow.Bold
      Fill: =RGBA(255, 255, 255, 1)
      Height: =90
      RadiusBottomLeft: =8
      RadiusBottomRight: =8
      RadiusTopLeft: =8
      RadiusTopRight: =8
      Visible: =varPopoverOpen
      Width: =240
      X: =20
      Y: =64
    Children:
      - conPopoverHeader:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            Height: =Parent.Height
            LayoutAlignItems: =LayoutAlignItems.Stretch
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =4
            PaddingBottom: =16
            PaddingLeft: =16
            PaddingRight: =16
            PaddingTop: =16
            Width: =Parent.Width
          Children:
            - lblPopoverTitle:
                Control: Label@2.5.1
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  Color: =RGBA(15, 23, 42, 1)
                  Font: =Font.'Open Sans'
                  FontWeight: =FontWeight.Semibold
                  Height: =18
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  Size: =11
                  Text: ="Profile"
            - lblPopoverDescription:
                Control: Label@2.5.1
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  Color: =RGBA(100, 116, 139, 1)
                  Font: =Font.'Open Sans'
                  Height: =45
                  LayoutMinHeight: =0
                  LayoutMinWidth: =0
                  Size: =11
                  Text: ="Update your name, photo, and bio."
                  VerticalAlign: =VerticalAlign.Top

Implementation

Copies the customized component code directly to your clipboard. Use Ctrl+V in Power Apps Studio.

Something not pasting right? Troubleshooting guide

Popover

Content

How to Use

Problem Solved

Integration

YAML Code

Implementation