UI Widgets Popover

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.

HTML
<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>
<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());
};

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

Watch Video

Show Example:
jQuery
<div data-bind="dxButton: { clickAction: togglePopover, text: 'Show' }" class="popover-button"></div>
<div data-bind="dxPopover: { width: 200, height: 'auto', visible: visible, target: '.popover-button'}">
    <div data-bind="dxList: { dataSource: colors, itemClickAction: function() { visible(false); } }"></div>
</div>
visible = ko.observable(false),
togglePopover = function() {
    this.visible(!this.visible());
},
colors = ["Red", "Green", "Black"]

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.