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. 
User Guide

Popover Component + Glossary Content Fragment

When triggered, the Popover appears as an overlay above all other content on a page. It displays a referenced Glossary Content Fragment (CF) term. It should be used for terms or abbreviations for which residents want a definition. The Popover can be inserted in the Text component on any template.

Learn about Content Fragments

Overview

Component name: Popover

Authors who can use component: any

Templates/page types that can use component: any

Required or optional: optional

Sample Popover component, showing a term's definition displayed over text.

Authoring Fields

Creating a Glossary Content Fragment 

1.       From the landing Navigation page, click on Content Fragments.

Navigation page featuring content fragments

2. On the left hand panel, select the folder where the CF is needed. It can be used by any page in this folder.

a.Select the Global folder for a Glossary term that can be used anywhere on PA.gov. This is called a global glossary.

b.Select your agency’s folder for a Glossary term that is specific to your agency. This is called a local glossary.

c. Once selected, click “Create” in the upper righthand corner. In this example, the CF is in the DHS folder (a local glossary term).

Content fragments featuring create button in upper right corner

3. New Content Fragment

a.Location pathfinder: This field shows the URL of the folder selected in Step 2. It does not need to be edited.

b. Content Fragment Model dropdown: Select “Glossary.”

c.  Properties fields

  i. Title: Optionally provide a title for your Glossary CF. Adding a title automatically creates a name as well. Note: this does not need to the name of the term you are defining.

  ii. Name: Provide a name for your CF. Only mandatory field in Properties.

  iii. Description: Optionally provide a description for your CF.

Property fields of new Glossary Content Fragment

4. Click “Create and open” to add detail to the Glossary CF immediately. Click “Create” to create the Glossary term and exit the authoring dialog- it can always be edited later.

Editing the Glossary Content Fragment

1. Glossary Name field: Add the term you are defining. It must be spelled exactly as it will be used (upper/lowercase; no spaces). Only one definition of the term may exist in the global or local glossary (ex. only one definition of CHIP in the DHS Content Fragments folder).

2. Definition field: Add the term’s definition. May optionally include a link.

3. Link pathfinder field: Optionally add an internal link. This won’t display on the Glossary, but is the preferred link for the term when searched.

4.  Click “Publish” button and “Publish Now” in the top right corner. This makes the CF available for use on pages.

Glossary Content Fragment in its editing state with fields to edit

Adding the Glossary CF to a page with the Popover

1. From the landing Navigation page, click on Sites. Navigate to the desired page.

a. If using a global glossary term, this may be any page on AEM.

b. If using a local glossary term, this must be a page in the same agency folder as the Glossary CF. Ex. a term in the DHS Content Fragments folder can only be referenced on a DHS page.

Navigation landing page

2. Once on the page, add the Text component. Add any text, including the term that is to be defined.

3.  Open the Text component so the full authoring dialog displays (not the abridged inline version).

4.  Highlight the term for which a Glossary CF was created.

Open Text component with full authoring dialogue

5. From the Styles dropdown (the S option), select the correct glossary. In this example, since we are in the DHS section referencing a DHS term, select Local Glossary. A checkmark appears.

6. Click Done and exit the Text authoring dialog.

7. In edit mode, the term is now underlined.

Underlined term for Popover

8.  Test that the Popover appears correctly. Select the Page Information icon from the top menu, then View as Published.

9.  In View as Published mode, select the term. The Popover appears, with the Glossary CF definition displaying to the side.

popover with the glossary cf definition

Accessibility

1. There are no specific accessibility notes for the Glossary CF or Popover component.

 

Other Tips

1. Glossary terms may only be one word. An enhancement is planned to enable phrases.

2. If you are updating an existing Glossary CF, make sure to publish again so the changes are pushed.

3. If the Popover is not displaying in View as Published, check the following:

a. That the highlighted term has no spaces before or after.

b. That the highlighted term exactly matches the Glossary Name field in the CF, including uppercase/lowercase letters.

c. That the Glossary CF was published.

4. The Popover will not display in Preview mode; make sure to test in View as Published.

5. There is no limit to the amount of Popovers that may appear on a page.

6. Authors need to individually apply the Popover each time they want it to display for a term.

7. If author selects Popover styling and there is no matching Glossary CF, no Popover will display.

8. When the Popover is open, residents can scroll on the page, and the Popover stays in place.