How to Customize the Popover Design Element

This article will demonstrate how to customize the Popover Design Element and expound on its modifiable features. 

There are two ways to add the Popover Design Element to your SharePoint page. Follow the option that best suits your needs.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Option 1: Using the Library of Design Elements
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Insert the Popover Design Element
    • Step 3: Add content
    • Step 4: Customize the Popover’s Design
    • Step 5: Save
  • Option 2: Using the Rich Text Editor
    • Step 1: Edit the ShortPoint Web Part
    • Step 2: Open Rich Text Editor
    • Step 3: Customize the Popover
    • Step 4: Save
• Popover Features
  • Popover Settings Window
    • A. Content tab
    • B. Design tab
    • C. Custom CSS Tab
  • Popover Rich Text Editor Options

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Start the interactive tutorial to see the two ways you can customize the Popover Design Element:

NOTECheck out Popover Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the option that best fits your needs:

Option 1: Using the Library of Design Elements

ShortPoint has a library of Design Elements that ShortPoint Designers can add to their page. Follow along to learn how to insert the Popover Design Element using this option:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Insert the Popover Design Element

• Click the plus icon.
• Use the search box to look for Popover and click it.

Step 3: Add content

• Customize the content of the Popover according to your liking.

Step 4: Customize the Popover’s Design

• Navigate to the Design tab.
• Select the Placement of the Popover.
• Once satisfied, click the green check mark.

NOTECheck out Popover Features to learn more about the OOTB options you can customize.

Step 5: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Option 2: Using the Rich Text Editor

Popover is an Inline Design Element. This means that you can also insert it into your SharePoint page using the Rich Text Editor. Follow the steps to learn how to access it:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit.

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Open Rich Text Editor

NOTEThe Rich Text Editor can be seen in Design Elements which allows text editing. An example of a Design Element with text editing capabilities is the Text Design Element.

• Hover over the Text, double-click, and highlight the text you want to turn into a Popover.
• Click the ShortPoint icon.

• Select the Show popover icon.

Step 3: Customize the Popover

• Customize the look and the design of the Popover according to your preferences.
• Click Apply.

NOTECheck out Popover Features to learn more about the OOTB options you can customize.

Step 4: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Popover Features

Below are the options you can find in the Popover Settings window and the Rich Text Editor:

Popover Settings Window

These are the options you will find if you used Option 1 to add the Popover Design Element:

A. Content tab

The Content tab allows you to edit the content inside the Popover. It has the following options:

	Popover	allows you to edit the main text.
	Title	allows you to edit the Title of the Popover.
	Content	allows you to add descriptive text inside the Popover.

B. Design tab

The Design tab allows you to customize the placement (Top, Left, Right, or Bottom) of the Popover Design Element. 

C. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Popover Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial) to know more about Custom CSS.

NOTEThe Connect and Visibility tabs are currently unavailable in Live Mode.

Popover Rich Text Editor Options

These are the options you will find if you used Option 2 to add the Popover Design Element:

	Popover	allows you to edit the main text.
	Title	allows you to edit the Title of the Popover.
	Content	allows you to add descriptive text inside the Popover.
	Placement	allows you to choose the placement of the Popover. You can choose from Top, Left, Right, or Bottom.

That’s it! You now know how to customize the Popover Design Element. 

Related articles:

• How to Customize the Vimeo Video Design Element
• How to Customize the Textshow Design Element
• How to Customize the Image Titles Design Element