A widget that displays the required content in a popup window.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The dxPopover widget is an overlay with an arrow that points to the UI element that has been clicked or tapped. This widget is similar to the dxPopup widget, but the popover window has an arrow that points to an associated UI element.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxPopover widget using the Knockout approach.

<div data-bind="dxPopover:{width: 200, height: 'auto', visible: visible, target: '.popover-button'}">
    <p>The text that should be displayed in the popup window.</p>
<div data-bind="dxButton: { clickAction: togglePopover, text: 'Show Popover' }" class="popover-button"></div>

Declare an observable Boolean variable and assign it to the visible configuration option to control widget visibility.

var visible = ko.observable(false),
togglePopover = function() {

If you create the widget using the jQuery approach, provided that it contains one or more widgets inside, the inner widget instances should be created within a function passed to the contentReadyAction option of the dxPopover widget.

<div id="popover">
    <div id="closeButton"></div>
function hidePopover() {
    contentReadyAction: function() {
            text: "Close",
            clickAction: hidePopover
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxPopover widget is related to the Collection Containers and Overlays categories. Read an overview of the features that are common for collection container widgets in the Common Tasks topic of the Collection Containers article. To learn about the features that are typical for editors, refer to the Common Tasks topic of the Overlays article.

Watch Video

Show Example:


An object defining configuration options for the dxPopover widget.


This section describes members used to manipulate the widget.


This section describes events fired by this component.