KendoReact

React Popover

  • The perfect component for displaying rich content when users hover, click or focus on elements within any React application.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The KendoReact Popover component is perfect for displaying rich content when users hover, click or focus on elements within any React application. The difference between it and the React Popup or the React Tooltip components is that the Popover supports more complex content and layouts. A common use case for this component is the additional element displayed with calendar events, which might include a list of attendees, meeting room information or agenda notes. Another common scenario is to add a Form or an Editor within the component - a popular workflow in Schedulers used when you want to enable your users to make quick edits through a popover.

    See React Popover Component demo

    React Popover Component
  • Configurable Title, Callouts and Actions Bar

    To make things easy for developers, every element of the React Popover is configurable, including the title and actions bar (a "footer" of sorts). The actions bar can be used for adding buttons or a text box, for example. Additionally, you can enable or disable the callout element (the arrow that links the Popover to the component it is linked to).

    See React Popover Component demo: Callout

    React Popover Component Callout enabled and disabled
  • Animations

    The React Popover allows you to enable or disable its opening and closing animation.

    See React Popover Component demo: Animations

    React Popover Component Animations
  • Collisions Support

    To prevent collisions with viewport edges, you can enable Collision support in the React Popover to control how the component behaves when the area it should be displayed in is not fully visible. You can choose between several options: move the Popover horizontally until it is fully displayed, flip its position or rendered it at the original position - an option that's helpful when the Popover is focused on open and the user scrolls to it.

    See React Popover Component demo: Collisions

    React Popover Component Collisions
  • Positioning

    The React Popover can be configured to open in four different directions relative to the current anchor or offset: on top, bottom and aligned to the right or left.

    See React Popover Component demo: Positioning

    React Popover Component Positioning
  • Support for Document Scale

    Scaling can be tricky to handle and often breaks the user experience when using regular popups, but the KendoReact Popover fully supports this action. This can come in especially handy if you expect to have users browsing your app on mobile devices with large resolutions, though it's also useful to have in other scenarios.

    See React Popover Component demo: Support for Document Scale

    React Popover Component Support for Document Scale

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.