[design-elements-header icon="https%3A%2F%2Fassets-global.website-files.com%2F60953231b313b56665e6e317%2F6156fd04797293904edaf1aa_popover.svg" title="Popover" description="Provide%20users%20supplemental%20content%20or%20information%20with%20the%20Popover%20Design%20Element.%20Words%20or%20phrases%20with%20the%20Popover%20will%20be%20highlighted%20and%20when%20triggered%2C%20the%20additional%20content%20will%20appear." /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed [popover content="Top%20positioned%20popover"]Popover (Top)[/popover]
tempus velit eget quam tempor, et pretium augue tristique. Mauris sit amet [popover left content="Left%20positioned%20popover"]Popover (Left)[/popover]
odio id leo ultrices bibendum. Pellentesque hendrerit, turpis a commodo hendrerit, nunc eros cursus nibh, vitae hendrerit eros [popover right content="Right%20positioned%20popover"]Popover (Right)[/popover]
metus id elit. Donec lobortis arcu sit amet lacus sollicitudin, vel dictum augue feugiat. [popover bottom content="Bottom%20positioned%20popover"]Popover (Bottom)[/popover]
Sed sapien lacus, convallis ac pellentesque eu, luctus commodo leo. Vestibulum consequat erat vitae ante suscipit, [popover title="Popover%20title" content="Popover%20content"]Popover with title[/popover]
nec porta urna feugiat. In hac habitasse platea dictumst.[/column]
[/row]
[/section-item]
[/section]
Popover Options Demos
Different Positions
[divider style="double-dotted" /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[popover content="Content"]Top positioned popover[/popover]
[popover left content="Content"]Left positioned popover[/popover]
[popover right content="Content"]Right positioned popover[/popover]
[popover bottom content="Content"]Bottom positioned popover[/popover]
[/column]
[/row]
[/section-item]
[/section]
Title and Content
[divider style="double-dotted" /]
[section class="shortpoint-copy"]
[section-item]
[row]
[column 12]
[popover title="Popover%20title" content="Popover%20content"]Popover with title[/popover]
[/column]
[/row]
[/section-item]
[/section]
[sp-demo-doc]
Title – text in the popover title
Content – text in the popover content
Placement –place where you will see the popover appearance:
- Default – by default popover will appear on the top
- Left – popover will appear on the left side
- Right – popover will appear on the right side
- Bottom – popover will appear on the bottom
[/sp-demo-doc]