calcite_popover: Create a Popover component

In calcite: Bindings to the Calcite Design System 'JavaScript' Component Library

Create a Popover component

Description

Create a Popover component

Usage

calcite_popover(...)

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.

Slots

The following slots are provided by this component:

Slot	Description
Default (unnamed)	A slot for adding custom content.

Value

an object of class calcite_component which is a subclass of shiny.tag

References

Official Documentation

Examples

calcite_popover()

calcite documentation built on April 3, 2025, 7:11 p.m.