fc-popover
An element to be used to show additional content or operations
Usage
<script>
import '@forter/popover';
</script>
<fc-popover>
<fc-button slot="toggle">Open</fc-button>
<div slot="content">
<div>This is the content</div>
<div>Of the famous popover</div>
<div>From forter web components</div>
<div>...</div>
</div>
</fc-popover>
Open Examples
<fc-list-item>
<fc-icon icon="promotions"></fc-icon>
<label> Promotions </label>
<section> Prevent financial losses due to users who take advantage of your promotions and coupons.. </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="gateway"></fc-icon>
<label> Gateway </label>
<section> determine whether credit card applicants are legitimate to safeguard your customer relationships </section>
</fc-list-item>
<fc-list-item>
<fc-icon icon="developer"></fc-icon>
<label>Developer</label>
<section> Integration tools to help faster and smoother integration to Forter.</section>
</fc-list-item>
```
Properties
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
close |
any |
|||
closeable |
closeable |
boolean |
false | whether popover is closed by clicking content. |
disabled |
disabled |
boolean |
false | disabled boolean. default: false, example: true |
horizontaloffset |
horizontaloffset |
number |
0 | horizontal offset for the content in pixels |
leaveToggle |
any |
|||
open |
open |
boolean |
false | whether popover is opened. |
openonhover |
openonhover |
boolean |
false | whether popover is opened by mouse over instead of click. |
position |
position |
"top" | "bottom" | "left" | "right" | "right_top" | "left_top" | "bottom_left" | "bottom_right" |
popover position with relative to toggle slot | |
registerToggle |
any |
|||
toggle |
any |
|||
verticaloffset |
verticaloffset |
number |
0 | vertical offset for the content in pixels |
Events
Event | Description |
---|---|
opened |
when visibility of pop over change. method: toggle , example: { "open" : true }
|
transition-end |
when the conent finishes fading |
CSS Custom Properties
Property | Description |
---|---|
--fc-popover-arrow-size |
content's arrow size. default: 10px
|
--fc-popover-background-color |
content's background color. default: white
|
--fc-popover-border-radius |
content's border radios. default: 10px
|
--fc-popover-box-shadow |
content's box shadow size. default: 0 2px 6px 2px rgba(183, 203, 206, 0.25)
|
--fc-popover-padding |
content's padding color. default: 10px
|
--fc-popover-z-index |
content's z-index. default: 999
|