Introduction

Add popover tooltips to elements using the popover shortcode. Choose from four different locations: top, bottom, left, right. There are several additional options including the popover color, border radius (rounded corners), border color, opacity, and more.

Example

Maecenas fermentum tincidunt turpis sit amet varius. Proin tristique aliquet pulvinar. Suspendisse potenti. Nam aliquam nulla at nulla hendrerit luctus. Curabitur nisl ligula, malesuada in tincidunt ut, ultrices non tellus. Mauris venenatis, nulla sit amet ullamcorper suscipit, tellus dolor scelerisque ipsum, mattis blandit purus est sed velit. Nulla tincidunt sodales est, non vulputate sem pellentesque in. Sed elit felis, malesuada ac bibendum at, vehicula vitae mi. Ut pharetra turpis ut purus vehicula porta. Ut vehicula sollicitudin laoreet. Cras vulputate, sapien a rutrum condimentum, nisl metus semper elit, at sollicitudin arcu urna nec elit. Cras eget odio leo, et sollicitudin lectus. Donec nibh mauris, rutrum eu dapibus ullamcorper, faucibus et ante.

Top
Bottom
Right
Left

Explore More Shortcodes

[intense_content_section]
<h2>Introduction</h2>
Add popover tooltips to elements using the popover shortcode. Choose from four different locations: <strong>top</strong>, <strong>bottom</strong>, <strong>left</strong>, <strong>right</strong>. There are several additional options including the popover color, border radius (rounded corners), border color, opacity, and more.
[/intense_content_section]
[intense_content_section background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Example</h2>
Maecenas fermentum tincidunt turpis sit amet varius. [intense_popover location="top" title="Popover on Top" text="This is a popover on top"]Proin tristique aliquet pulvinar[/intense_popover]. Suspendisse potenti. Nam aliquam nulla at nulla hendrerit luctus. Curabitur nisl ligula, malesuada in tincidunt ut, ultrices non tellus. Mauris venenatis, nulla sit amet ullamcorper suscipit, tellus dolor scelerisque ipsum, mattis blandit purus est sed velit. Nulla tincidunt sodales est, [intense_popover location="bottom" title="Popover on Bottom" text="This is a popover on bottom"]non vulputate[/intense_popover] sem pellentesque in. Sed [intense_popover link="#" location="right" title="Popover on Right" text="This is a popover on right"]elit felis[/intense_popover], malesuada ac bibendum at, vehicula vitae mi. Ut pharetra turpis ut purus vehicula porta. Ut vehicula sollicitudin laoreet. Cras vulputate, sapien a [intense_popover location="left" title="Popover on Left" text="This is a popover on left"]rutrum[/intense_popover] condimentum, nisl metus semper elit, at sollicitudin arcu urna nec elit. Cras eget odio leo, et sollicitudin lectus. Donec nibh mauris, rutrum eu dapibus ullamcorper, faucibus et ante.

[intense_row][intense_column size="3"]
[intense_popover location="top" tooltip_background_color="error" tooltip_title_background_color="#730202" tooltip_font_color="#ffffff" tooltip_border_color="error" link="#" title="Popover on Top" text="This is a popover on top"]Top[/intense_popover]
[/intense_column][intense_column size="3"][intense_popover location="bottom" title="Popover on Bottom" tooltip_opacity="100" text="This is a popover on bottom"]Bottom[/intense_popover]
[/intense_column][intense_column size="3"][intense_popover location="right" link="#" title="Popover on Right" text="This is a popover on right"]Right[/intense_popover]
[/intense_column][intense_column size="3"][intense_popover location="left" title="Popover on Left" text="This is a popover on left"]Left[/intense_popover]
[/intense_column][/intense_row]
[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]