JSPM – @forter/popover@2.17.1

Package Exports

@forter/popover
@forter/popover/index.js

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

Open

Forter protects all of your online transactions from fraud

Forter automatically evaluates the risk of each transaction affected by the directive

protects your loyalty program accounts from unauthorized access or attempts to steal their points

Open

Ecommerce

Forter protects all of your online transactions from fraud

INR Solution

Forter automatically evaluates the risk of each transaction affected by the directive

Loyalty

protects your loyalty program accounts from unauthorized access or attempts to steal their points

Returns

Identify and block consumers who abuse your business’ refund policies.

 <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`