Popover

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.

HTML
<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>
<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.

JavaScript
var visible = ko.observable(false),
togglePopover = function() {
    this.visible(!this.visible());
};

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.

HTML
<div id="popover">
    <div id="closeButton"></div>
</div>
JavaScript
function hidePopover() {
    $("#popover").dxPopover("hide");
};
$("#popover").dxPopover({
    contentReadyAction: function() {
        $('#closeButton').dxButton({
            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:
jQuery

Configuration

An object defining configuration options for the dxPopover widget.

Methods

This section describes members used to manipulate the widget.

Events

This section describes events fired by this component.