Miss any of our Open RFC calls?Watch the recordings here! »

@forter/popover

2.12.5 • Public • Published

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

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.
horizontaloffset horizontaloffset number 0 horizontal offset for the content in pixels
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
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

Install

npm i @forter/popover

DownloadsWeekly Downloads

28

Version

2.12.5

License

Apache-2.0

Unpacked Size

120 kB

Total Files

61

Last publish

Collaborators

  • avatar
  • avatar
  • avatar