Create a Popover component
calcite_popover.RdCreate a Popover component
Arguments
- ...
named attributes passed to
htmltools::tag()
Details
Properties
The following properties are provided by this component:
| Name | Attribute | Description | Values | Reflects to Attribute |
| autoClose | auto-close | When true, clicking outside of the component automatically closes open calcite-popovers. | boolean | TRUE |
| closable | closable | When true, displays a close button within the component. | boolean | TRUE |
| flipDisabled | flip-disabled | When true, prevents flipping the component's placement when overlapping its referenceElement. | boolean | TRUE |
| flipPlacements | NA | Specifies the component's fallback placement when it's initial or specified placement has insufficient space available. | Check API reference | FALSE |
| focusTrapDisabled | focus-trap-disabled | When true, prevents focus trapping. | boolean | TRUE |
| heading | heading | The component header text. | string | FALSE |
| headingLevel | heading-level | Specifies the heading level of the component's heading for proper document structure, without affecting visual styling. | 1 | 2 | 3 | 4 | 5 | 6 | TRUE |
| initialFocusTrapFocus | initial-focus-trap-focus | Specifies whether focus should move to the popover when the focus trap is activated. @internal | ((() => FocusTargetValueOrFalse)) | HTMLElement | SVGElement | boolean | string | FALSE |
| label | label | Accessible name for the component. | string | FALSE |
| messageOverrides | NA | Use this property to override individual strings used by the component. | Check API reference | FALSE |
| offsetDistance | offset-distance | Offsets the position of the popover away from the referenceElement. | number | TRUE |
| offsetSkidding | offset-skidding | Offsets the position of the component along the referenceElement. | number | TRUE |
| open | open | When true, displays and positions the component. | boolean | TRUE |
| overlayPositioning | overlay-positioning | Determines the type of positioning to use for the overlaid content. Using "absolute" will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. "fixed" value should be used to escape an overflowing parent container, or when the reference element's position CSS property is "fixed". | "absolute" | "fixed" | TRUE |
| placement | placement | Determines where the component will be positioned relative to the referenceElement. | "auto" | "auto-end" | "auto-start" | "bottom" | "bottom-end" | "bottom-start" | "leading" | "leading-end" | "leading-start" | "left" | "left-end" | "left-start" | "right" | "right-end" | "right-start" | "top" | "top-end" | "top-start" | "trailing" | "trailing-end" | "trailing-start" | TRUE |
| pointerDisabled | pointer-disabled | When true, removes the caret pointer. | boolean | TRUE |
| referenceElement | reference-element | The referenceElement used to position the component according to its placement value. Setting to an HTMLElement is preferred so the component does not need to query the DOM. However, a string id of the reference element can also be used. | Element | VirtualElement | string | FALSE |
| scale | scale | Specifies the size of the component. | "l" | "m" | "s" | TRUE |
| triggerDisabled | trigger-disabled | When true, disables automatically toggling the component when its referenceElement has been triggered. This property can be set to true to manage when the component is open. | boolean | TRUE |
Events
The following events are observed by shiny:
| Event | Description |
| calcitePopoverBeforeClose | Fires when the component is requested to be closed and before the closing transition begins. |
| calcitePopoverBeforeOpen | Fires when the component is added to the DOM but not rendered, and before the opening transition begins. |
| calcitePopoverClose | Fires when the component is closed and animation is complete. |
| calcitePopoverOpen | Fires when the component is open and animation is complete. |