JSPM – @forter/popover@2.4.2

Package Exports

@forter/popover

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@forter/popover) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

<!-- complex -->
<fc-popover  position="right_top" closeable>
  <fc-button slot="toggle">Open</fc-button>
  <fc-list slot="content">
     <fc-list-item>
       <fc-icon icon="ecommerce"></fc-icon>
       <label> Ecommerce </label>
       <section>Forter protects all of your online transactions from fraud </section>
     </fc-list-item>
     <fc-list-item>
         <fc-icon icon="inr"></fc-icon>
         <label> INR Solution </label>
         <section>Forter automatically evaluates the risk of each transaction affected by the directive </section>
     </fc-list-item>
     <fc-list-item>
         <fc-icon icon="loyalty"></fc-icon>
         <label> Loyalty </label>
         <section> protects your loyalty program accounts from unauthorized access or attempts to steal their points </section>
     </fc-list-item>
     <fc-list-item>
       <fc-icon icon="returns"></fc-icon>
       <label> Returns </label>
       <section>Identify and block consumers who abuse your business’ refund policies. </section>
     </fc-list-item>

     <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>
</fc-list>
</fc-popover>

Properties

Property	Attribute	Type	Default	Description
`closeable`	`closeable`	`boolean`	false	whether popover is closed by clicking content.
`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

Events

Event	Description
`closed`	hide popover visibility. method: `close`, example: `{ "open" : false }`
`opened`	when visibility of pop over change. method: `toggle`, example: `{ "open" : true }`

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`