Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @forter/popover with all npm packages installed. Try it out:

var popover = require("@forter/popover")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@forter/popover v2.12.5

popover from Forter Components

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free