@forter/popover NPM

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`