For the managed package runtime, this page contains a Popover LWC ReadMe for each Vlocity release.
This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see Omnistudio Help.
Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20
The Popover Lightning Web Component is a non-modal dialog. The component must be paired with a clickable trigger element and contain at least one focusable element.
Available c-popover Attributes
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
extraclass |
string |
Adds a class to the table element. To add multiple classes, use a space to separate each class, such as 'classone classtwo'. |
||
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme to use for this component. |
|
|
variant |
error, feature, panel, walkthrough, warning |
string |
Sets what type of popover to use. If a value is not set, a basic popover displays. |
|
|
nubbinposition |
top, left, bottom, right (See description for more options) (Default: top-left) |
string |
Sets the position of the triangle (nubbin) pointing to the content. There are three ways to provide nubbin position: top, top-left or top-left-corner. |
|
|
size |
small, medium, large, full-width (Default: medium) |
string |
Sets the size of popover. |
|
|
show |
true, false (Default: false) |
boolean |
To display popover by default, set to true. |
|
|
showclosebutton |
true, false (Default: false) |
boolean |
To show the close button by default, set to true. |
|
|
icon-url |
(Default: slds icon url) |
string |
Defines the base url for the icon. |
|
|
To display its content, the Popover component supports three slots: |
Example c-popover Component
<c-popover
title="Test"
theme="{theme}"
icon-url="{iconUrl}"
showclosebutton="true"
onmouseover="{showPopover}"
onmouseout="{hidePopover}"
>
<div slot="header">
<h1>Header description</h1>
</div>
<div slot="content">
This is a sample text
</div>
<div slot="footer">
<button>test</button>
</div>
</c-popover>Vlocity Insurance and Health Summer '19 and Vlocity CME Fall '19
The Popover Lightning Web Component is a non-modal dialog. The component must be paired with a clickable trigger element and contain at least one focusable element.
Available c-popover Attributes
To display its content, the Popover component supports three slots:`header`, content, footer (see example below). You must specific content. This component does not support base templates.
|
Attribute |
Value |
Type |
Required |
Description |
|---|---|---|---|---|
|
extraclass |
string |
Adds a class to the table element. To add multiple classes, use a space to separate each class, such as `classone classtwo'. |
||
|
theme |
slds, nds (Default: slds) |
string |
Sets the theme to use for this component. |
|
|
variant |
error, feature, panel, walkthrough, warning |
string |
Sets what type of popover to use. If a value is not set, a basic popover displays. |
|
|
nubbinposition |
top, left, bottom, right (See description for more options) (Default: top-left) |
string |
Sets the position of the triangle (nubbin) pointing to the content. There are three ways to provide nubbin position: top, top-left or top-left-corner. |
|
|
size |
small, medium, large, full-width (Default: medium) |
string |
Sets the size of popover. |
|
|
show |
true, false (Default: false) |
boolean |
To display popover by default, set to true. |
|
|
showclosebutton |
true, false (Default: false) |
boolean |
To show the close button by default, set to true. |
|
|
icon-url |
(Default: slds icon url) |
string |
Defines the base url for the icon. |
Example c-popover Component
<c-popover
title="Test"
theme="{theme}"
icon-url="{iconUrl}"
showclosebutton="true"
onmouseover="{showPopover}"
onmouseout="{hidePopover}"
>
<div slot="header">
<h1>Header description</h1>
</div>
<div slot="content">
This is a sample text
</div>
<div slot="footer">
<button>test</button>
</div>
</c-popover>