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>

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 |