Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

PopoverProps

NameTypeDefaultDescription

anchor?

"null" | HTMLElement

Specifies the element which will be used as an anchor. The Popover opens next to that element.

animate?

boolean | PopoverAnimation

Controls the Popover animation. By default, the opening and closing animations are enabled.

appendTo?

"null" | HTMLElement

Defines the container to which the Popover will be appended. Defaults to body.

  • If set to null the Popover will be rendered without React Portal.

callout?

boolean

Controls the Popover callout element. If set to false, the callout element will not be rendered.

className?

string | string[]

Specifies a list of CSS classes that will be added to the Popover element.

collision?

PopoverCollision

Configures the collision behavior of the Popover. By default, it's set to none.

contentStyle?

React.CSSProperties

Represents the styles that are applied to the content element of the Popover.

id?

string

Specifies the id that will be added to the Popover element.

margin?

PopoverMargin

Configures the margin value that will be added to the Popover dimensions in pixels and leaves a blank space between the Popover and the anchor. By default, it's automatically set based on the Popover position prop.

offset?

PopoverOffset

Specifies the absolute position of the element. The Popover opens next to that point. The pivot point of the Popover is defined by the position configuration option. The boundary detection is applied by using the window viewport.

popoverClass?

string | string[] | {[key: string]: boolean}

Specifies a list of CSS classes that will be added to the internal animated element.

position?

PopoverPosition

Specifies the position of the Popover element relative to the current anchor or offset.

positionMode?

PositionMode

Specifies the position mode of the component. By default, the Popover uses fixed positioning. To make the Popover acquire absolute positioning, set this option to absolute.

If you need to support mobile browsers with the zoom option, use the absolute positioning of the Popover.

scale?

number

Used to set the document scale when using a scale transform.

The document or container scale is required to compute the popover position correctly. Detecting the scale is not reliable and must be set by providing a value for SCALE.

Using this token is not necessary for user-applied browser zoom.

show?

boolean

Controls the Popover visibility. Defaults to false.

style?

React.CSSProperties

Represents the styles that are applied to the Popover.

title?

React.ReactNode

Specifies the title of the Popover component.

Methods

onClose

Fires after the Popover is closed.

Parameters

event

PopoverCloseEvent

onOpen

Fires after the Popover is opened and the opening animation ends.

Parameters

event

PopoverOpenEvent

onPosition

Fires after the Popover position is set.

Parameters

event

PopoverPositionEvent