Popover Element

05/05/2019

The Popover Element is a simple yet elegant way to display information without disrupting your page layout. The Popover Element is also an Inline Element, which means that it will only work when used with existing content. You can add popovers to text, images, and even buttons! To learn the different ways on how to add popovers, please continue reading below.

Hover Here To See The Popover Element In Action
View More Examples!

How To Use The Popover Element

You can add popovers to any text content or image you have. For example, a word between paragraphs or an entire sentence. You can also add popovers on buttons, however to do that, it requires a few more steps. Continue reading below to learn about how to add popovers to text, images, and buttons.

How To Add Popovers To Text

Step 1 – Add any element that allows for plain text or HTML to be inserted via the WordPress Content Editor. For example, the Text Block element.

Step 2 – Locate the WordPress content editor field in your chosen element. On the toolbar, you’ll find the ‘Element Generator’ icon which looks like the Fusion Builder logo. Click the ‘Element Generator’ icon to bring up the Elements window.

Step 3 – Select the ‘Popover’ element.

Step 4 – In the ‘Triggering Content’ field, enter the text that you’d like to trigger the popover with. For example, View More Info Here!.

Step 5 – In the ‘Popover Heading’ and ‘Contents Inside Popover’ options, insert the heading text and the content, respectively, that you’d like to display in the popover.

Step 6 – Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.

Step 7 – Once finished, click the ‘Insert’ button.

Step 8 – You can then add content into the main element as needed. Once you’re done, click ‘Save’ to save your changes.

Popover Element - Adding a popover to text

How To Add Popovers To Images

Step 1 – Add any element that allows for plain text or HTML to be inserted via the WordPress Content Editor. For example, the Text Block element.

Step 2 – Locate the WordPress content editor field in your chosen element. On the toolbar, you’ll find the ‘Element Generator’ icon which looks like the Fusion Builder logo. Click the ‘Element Generator’ icon to bring up the Elements window.

Step 3 – Select the ‘Popover’ element.

Step 4 – In the ‘Triggering Content’ field, click ‘Add Media’ button, and select a picture from the Media Library. If there are no images in the Media Library, go to ‘Upload Files’ tab, and upload an image. Upon selecting the chosen image, click ‘Insert into page’ button.

Step 5 – In the ‘Popover Heading’ and ‘Contents Inside Popover’ options, insert the heading text and the content, respectively, that you’d like to display in the popover.

Step 6 – Set the other options such as the trigger method, popover position, heading/content background color, and other styling colors found in the Design tab.

Step 7 – Once finished, click the ‘Insert’ button.

Step 8 – You can then add content into the main element as needed. Once you’re done, click ‘Save’ to save your changes.

Popover Element - Adding a popover to an image

How To Add Popovers To Buttons

Step 1 – Create a popover by following the instructions in the ‘How To Add Popovers To Text’ section above. Make sure to set the ‘Triggering Method’ option to Hover in order for the popover to display when hovering over the button.

Step 2 – Insert the popover element to the page, then switch to the Default Editor to copy the popover’s code snippet. Once you’ve copied it, you can discard it. It looks something like this:

Copy to Clipboard

Step 3 – Activate the Fusion Page Builder again and insert a Button element. Click the ‘Settings’ icon to bring up it’s options window.

Step 4 – Paste the Popover code snippet you just copied into the ‘Button’s Text’ field. You can then customize the button to your liking using the different options available. Once you’re finished customizing the Button Element, click the ‘Save’ button.

Element Options

General Tab

Location: The edit screen within each Element.

You can deploy as many individual Elements in pages and posts as you need, there is no limit. Within each of the Elements you will see a tab or tabs that house an array of options that make it possible for you to configure each Element independently, and greatly enhance your flexibility and creative options.

Note: The Default setting will use the global settings assigned for this element in your Theme Options > Fusion Builder Elements > Popover Element section.

  • Triggering Content – This is the content that will trigger the popover.

  • Popover Heading – Insert the heading text of the popover.

  • Contents Inside Popover –Text to be displayed inside the popover.

  • Popover Trigger Method –Select mouse action to trigger popover. Choose from Hover, or Click.

  • Popover Position – Select the display position of the popover. Choose from Default, Top, Bottom, Left, or Right.

  • CSS Class – Allows you to add a class name to the wrapping HTML element. The class name does not have to be unique, but all areas with the same name will reflect any changes made to the class.

  • CSS ID – Allows you to add an ID to the wrapping HTML element. The ID must be unique to each CSS ID.

View The Options Screen

Design Tab

  • Popover Heading Background Color – Controls the background color of the popover heading.

  • Popover Content Background Color – Controls the background color of the popover content area. Leave empty for the default value.

  • Popover Border Color – Controls the border color of the of the popover box.

  • Popover Text Color – Controls all the text color inside the popover box. Leave blank for default value.

View The Options Screen

Global Options

Location: WordPress Dashboard > Avada > Theme Options > Fusion Builder Elements > Popover Element

The Avada Advanced Options Network gives you amazing flexibility with additional Global Options that allows you to control individual Elements en masse.

  • Popover Heading Background Color – Controls the background color of the popover heading.

  • Popover Content Background Color – Controls the background color of the popover content area.

  • Popover Border Color – Controls the border color of the of the popover box.

  • Popover Text Color – Controls all the text color inside the popover box. Leave blank for default value.

  • Popover Position – Selects the position of the popover in reference to the triggering element. Choose from Top, Right, Bottom, or Left.

View The Options Screen

Raw Element Parameters

Each of these parameters correspond to each individual Element option as shown above, in this document. Likewise, the format illustrated below is what you will see if the Fusion builder is deactivated in your page/post.

Copy to Clipboard
  • title – The popover’s title.
  • content – The content displayed inside the popover.
  • trigger – Choose from click, or hover. Sets the mouse action to trigger the popover.
  • placement – Choose from default, top, left, right, or bottom. Sets the popover’s position on the triggering content.
  • class – Add a custom class to the wrapping HTML element for further css customization. Learn more here.

  • id – Add a custom id to the wrapping HTML element for further css customization. Learn more here.

  • title_bg_color – Accepts a hexcode ( #000000 ). Sets the heading’s background color.

  • content_bg_color – Accepts a hexcode ( #000000 ). Sets the background color.

  • bordercolor – Accepts a hexcode ( #000000 ). Sets the border’s color.
  • textcolor – Accepts a hexcode ( #000000 ). Sets the text’s color.
  • custom content – Insert the triggering you’d like to highlight between the

    Copy to Clipboard

    tags.