Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Popover

    The Popover Component is a layer that appears above all other content on a page. 

    Overview

    The Popover Component is a layer that appears above all other content on a page containing text and interactive elements. The popover contains a caret tip to help show the relationship between the popover and where it was triggered from.

    When to Use

    A popover should be used sparingly and intentionally since it disrupts all other content on a page. A popover can be used when you need to display additional details for specific elements on a page.

    Formatting

    Anatomy

    Popover anatomy diagram
    1. Title
    2. Body Copy
    3. Optional CTA (button, button group, link)
    4. Caret tip
    5. Dismiss icon

    Interactive Trigger Button

    A popover is controlled by a trigger button. An interactive element must trigger the popover to open on mouse click or keyboard press (SPACEBAR/ENTER). This interactive element is a button by function but can visually change its shape and size depending on the use case.

    The popover is triggered by an interactive button. There should be 4px of padding between the trigger and the caret and have 4px of spacing in all orientations. The caret tip of the popover must be aligned to the trigger button and is arranged dynamically based on where the trigger button is in relation to the page.

     
    Popover anatomy diagram

    Placement

    Popover anatomy diagram

    Content

    Element

    Content Type

    Recommended Character Limit

    Title (optional)

    Text

     

    Body Copy

    Text

     

    Call to Action (optional)

    Button, Button Group, Link

    _

    Close Icon

    Icon Button

    _