• What is KendoReact
  • Getting Started
  • Unstyled Mode
  • Server Components
  • Components
    • Animation
    • Barcodes
    • Buttons
    • Chart Wizardnew
    • Chartsupdated
    • Common Utilities
    • Conversational UIupdated
    • Data Gridupdated
    • Data Query
    • Data Toolsupdated
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Map
    • Notification
    • OrgChart
    • PDF Processing
    • PDF Viewer
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheet
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Upload
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting

KendoReact Popover Overview

The KendoReact Popover component is a popup with rich interactable content, which is displayed when a related UI element is clicked or hovered over.

The KendoReact Popover component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-tooltips package.


Overview

The following example demonstrates the Popover in action.

Example
View Source
Change Theme:

The Popover is part of the KendoReact Tooltips component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Popover and the rest of the components in the package, see the Getting Started with the KendoReact Tooltips guide.

Functionality and Features

  • Positioning - The Popover allows you to specify the position of the Popover element relative to the current anchor or offset.
  • Callout - You to enable or disable its callout element.
  • Collisions - The Popover allows you to control the collision behavior when it's not fully visible.
  • Animations - You can enable, disable or customize its opening and closing animation.
  • Scale - The KendoReact Popover support custom Document Scale.

Configuring the Title

The KendoReact Popover component provides a fully configurable title through the title property. It accepts strings and custom components. If this prop is not set, the Popover component will not render the title wrapper.

Example
View Source
Change Theme:

Configuring the Popover ActionsBar

The KendoReact Popover component allows you to add custom actions by using the PopoverActionsBar component.

Example
View Source
Change Theme:

Forms Integration

The KendoReact Popover component supports rich interactable content like forms with custom editors.

Example
View Source
Change Theme: