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

Type: Object

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.

To create the dxPopover widget, add a div element with dxPopover Knockout binding within the body of the required view.

<div data-bind="dxPopover:{width: 200, height: 'auto', visible: visible, target: '.popover-button'}">
    <p>The text that should be shown 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() {

Refer to the Add a Widget documentation section to learn how to create widgets in detail.

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.