• What is KendoReact
  • Getting Started
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Formupdated
    • Ganttupdated
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChartnew
    • PDF Processing
    • PDFViewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Components / Tooltips / API / PopoverProps / 

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.

onClose?

(event: PopoverCloseEvent) => void

Fires after the Popover is closed.

onOpen?

(event: PopoverOpenEvent) => void

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

onPosition?

(event: PopoverPositionEvent) => void

Fires after the Popover position is set.

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.

In this article

Not finding the help you need?

Contact Support