fun-popover
Popover component that shows a dialog over the rest of the page on demand.
Note that the open property is one-way. Developers will need to listen to the
funDismiss event and set open to false themselves. The FunDismiss event is emitted when:
- user clicks outside the popover
- user presses the ‘escape’ key
If your popover will contain other floating content such as dropdowns or tooltips you should add class relative to your body content,
so that positioning works properly in Firefox and safari.
Examples
Specifications
Properties
| Property | Attribute | Required | Description | Type | Default |
|---|---|---|---|---|---|
| backdrop | backdrop | false | Use a backdrop to capture clicks outside the popover rather than capturing clicks in the document. | boolean | |
| debug | debug | false | Set to true for extra console debug logging. | boolean | |
| offsetX | offset-x | false | adds a horizontal offset between the trigger element and the popover. | number | 15 |
| offsetY | offset-y | false | adds a vertical offset between the trigger element and the popover. | number | 20 |
| open | open | true | Is the popover open or not? | boolean | |
| position | position | false | Position the popover in relation to the trigger element. Defaults to the ‘best’ location. | "auto" | "bottom" | "left" | "right" | "top" | |
| positionStrategy | position-strategy | false | Use to override the positioning strategy, which can be helpful in some conditions. | "absolute" | "fixed" | 'absolute' |
Events
| Name | Description |
|---|---|
funDismiss | Occurs when the popover is dismissed. |
Slots
| Name | Description |
|---|---|
| content | The content to be shown inside the popover. |
| trigger | The element the popover should be positioned relative to. Usually clicking this element should open the popover. |
Parts
| Name | Description |
|---|---|
| arrow | |
| content | |
| popover |
Dependencies
Depends on
This documentation page generated from the source at fun-popover.tsx
