Popover

Updated:

Use for positioning floating content relative to a trigger element.

Properties

Learn more about properties.

align

Aligns the popover to the left or right side of the control element.

animated

Controls whether the popover is animated when opening/closing. Default is true (animated). Set to false to disable animations. Animation is also disabled if the user has enabled prefers-reduced-motion.

block

Indicates the popover will match the width of its parent element.

controlElement
control-element

The element that controls the popover's behavior.

direction

Force the direction of the popover when it opens. If no value is passed, the component will auto-detect the direction based on available space.

maxHeight
max-height

Force the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.

open

Controls whether the popover is open or closed.

Events

The q2-popover element exposes events that can be used to send and receive data from the component based on user interaction.

Learn more about events.

tctPopoverStateChanged

Emitted when the popover is opened or closed.

Event Detail Type signature

{ open: boolean; }

Methods

The q2-popover element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

scrollContainerTo

Type signature

scrollContainerTo(options: ScrollToOptions) => Promise<void>

toggle

Type signature

toggle() => Promise<void>

Dependencies

This component uses other components in the Tecton library, including:

    Dependents

    Other components in the Tecton library use this component, including:

    • q2-calendar
    • q2-dropdown
    • q2-pill
    • q2-select
    • q2-tag

    Accessibility

    Accessibility Report

    Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

    CSS Variables

    The following CSS variables are available to override the default theme styles of the q2-popover component.