@forter/popover

popover from Forter Components

Usage no npm install needed!

<script type="module">
  import forterPopover from 'https://cdn.skypack.dev/@forter/popover';
</script>

README

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
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
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
closed hide popover visibility. method: close, example: { "open" : false }
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