# Popovers

- Link: https://www.solmesz.com/popovers
- Published: 2014-09-04T18:47:26-03:00
- Author: Sol Mesz

# Popover Shortcode

Avada includes a popover shortcode that is perfect for adding additional content
for your viewers. The content is housed as secondary information that the viewer
can trigger by a mouse hover, or a mouse click. Our expanded options allow you customize
several aspects of the popover like background colors, border colors, text colors,
trigger value, popup placement and more.

![boys_reading](data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw
==)

## Avada Popover Shortcode

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat orem ipsum 
dolor sit amet, consectetur adipisicing mouse click here elit. Incididunt ut labore
et dolore magna aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums
proident, sunt in commodo consequat orem ipsum dolor sit amet culpa qui officia 
deserunt mollit anims.


**Background Colors**

Control the background color behind the popover title and the content itself.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat orem ipsum 
dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna
aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt
in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit
anims sadips ipsums dolores sits unser.


**Border / Text Colors**

Control the border color and text color of the popover shortcode.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat orem ipsum 
dolor sit amet, consectetur adipisicing elit. Incididunt ut labore et dolore magna
aliqua. Ut enim ad et dolore magna exercitation ullamco lesse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non sadips ipsums proident, sunt
in commodo consequat orem ipsum dolor sit amet culpa qui officia deserunt mollit
anims sadips ipsums dolores sits unser.


**Trigger Value**

Set the popover to trigger on mouse hover or mouse click.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. mouse hover trigger ut enim ad minim
veniam, quis nostrud exercitation ullamco. Excepteur sint occaecat cupidatats.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. mouse click trigger ut enim ad minim
veniam, quis nostrud exercitation ullamco. Excepteur sint occaecat cupidatats.

**Popover Placement**

Control the direction of the popover popup box, left, right, top, bottom.

![popover top](data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%
2Fsvg%27%20width%3D%27141%27%20height%3D%27107%27%20viewBox%3D%270%200%20141%20107%
27%3E%3Crect%20width%3D%27141%27%20height%3D%27107%27%20fill-opacity%3D%220%22%2F%
3E%3C%2Fsvg%3E)

![popover right](data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%27%20width%3D%27141%27%20height%3D%27107%27%20viewBox%3D%270%200%20141%
20107%27%3E%3Crect%20width%3D%27141%27%20height%3D%27107%27%20fill-opacity%3D%220%
22%2F%3E%3C%2Fsvg%3E)

![popover bottom](data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%
2F2000%2Fsvg%27%20width%3D%27141%27%20height%3D%27107%27%20viewBox%3D%270%200%20141%
20107%27%3E%3Crect%20width%3D%27141%27%20height%3D%27107%27%20fill-opacity%3D%220%
22%2F%3E%3C%2Fsvg%3E)

![popover left](data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%
2Fsvg%27%20width%3D%27141%27%20height%3D%27107%27%20viewBox%3D%270%200%20141%20107%
27%3E%3Crect%20width%3D%27141%27%20height%3D%27107%27%20fill-opacity%3D%220%22%2F%
3E%3C%2Fsvg%3E)

**Complete Set of Options **

Every option and description included with the popover shortcode is listed below.

 * **title** – The _custom title text_ that is displayed in the popup box.
 * **title_bg_color** – Accepts a hexcode _( #000000 )._ Sets the heading’s background
   color. Leave Blank for Theme Option selection.
 * **content** – The _custom text_ that is displayed in the popup box.
 * **content_bg_color** – Accepts a hexcode _( #000000 )._ Sets the background color.
   Leave Blank for Theme Option selection.
 * **bordercolor** – Accepts a hexcode _( #000000 )._ Sets the border’s color. Leave
   Blank for Theme Option selection.

 * **textcolor** – Accepts a hexcode _( #000000 )._ Sets the text’s color. Leave
   Blank for Theme Option selection.
 * **trigger** – Can be one of these values: _click, _or_ hover. _Sets the mouse
   action to trigger popover.
 * **placement** – Can be one of these values: _default, top, left, right, _or_ 
   bottom. _Sets the popover’s position.
 * **class** – Add a _custom class_ to the wrapping HTML element for further css
   customization.
 * **id** – Add a _custom id_ to the wrapping HTML element for further css customization.

# Join The 100,000+ Satisfied Avada Users!

[ BUY AVADA NOW!](http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=ThemeFusion)