Popover Configuration

The Popover enables you to display rich content that appears on user interaction with a particular element. It comes with a highly customizable functionality in terms of the targeted elements, content, templates, opening and closing mechanics, and more.

The following example demonstrates a basic popover in action

Setup

To define the contents of the Popover add the <kendo-popover> tag on the page. The popover content is divided in 3 main sections, each of which is optional. Those are:

• title—Represents the header section of the popover. To configure the title, either pass a string to the title configuration option or define a title template.
• body—Represents the main content section of the popover. To configure the body, either pass a string to the body configuration option or define a body template.
• actions—Represents an action buttons section that will be displayed below the body. To configure the popover actions, define an actions template.

Copy Code<kendo-popover title="Header content" body="Main content">
</kendo-popover>

The <kendo-popover> tag is only used to define the contents of the popover. In order to display the popover on the page, you should specify the anchor elements that it will be attached to. There are two main ways to display the Popover, depending on whether it should be linked to a single or multiple elements. Both are described in details in the sections below:

• Popover Anchor
• Popover Container

Popover Anchor

The popover enables you to display it in relation to a single DOM element. To achieve this:

1. Apply the kendoPopoverAnchor directive to the element that should display the popover.

Copy Code    <button kendoPopoverAnchor>Show Popover</button>

2. Pass a popover instance to the popover input of the kendoPopoverAnchor directive.

Copy Code    <button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>

    <kendo-popover #myPopover title="Header content" body="Main content">
    </kendo-popover>

3. Optionally configure the type of user interaction, on which the popover should be displayed by setting the showOn option of the kendoPopoverAnchor directive. By default it will be displayed on click.

Copy Code    <button kendoPopoverAnchor [popover]="myPopover" showOn="hover">Show Popover</button>

The following example demonstrates how to attach the popover to a single element.

Popover Container

The Popover enables you to display it in relation to multiple DOM elements. This approach is useful for scenarios in which the same popover layout should be reused on multiple occasions. To achieve this:

1. Apply the kendoPopoverContainer directive to the most outer wrapping element which will hold the popover anchors.

Copy Code    <div kendoPopoverContainer></div>

2. Set the filter option of the kendoPopoverContainer directive. It is used to determine the child elements, which will serve as popover anchors. The filter option accepts a string value, representing any valid query selector.

Copy Code    <div kendoPopoverContainer filter=".has-popover">
        <button class="has-popover">Show Popover</button>
        <button>Button Without Popover</button>
        <button class="has-popover">Show Popover</button>
    </div>

3. Pass a popover instance to the popover input of the kendoPopoverContainer directive.

Copy Code    <div kendoPopoverContainer filter=".has-popover" [popover]="myPopover">
        <button class="has-popover">Show Popover</button>
        <button>Button Without Popover</button>
        <button class="has-popover">Show Popover</button>
    </div>

    <kendo-popover #myPopover title="Header content" body="Main content">
    </kendo-popover>

4. Optionally configure the type of user interaction, on which the popovers should be displayed by setting the showOn option of the kendoPopoverContainer directive. By default they will be displayed on click.

Copy Code    <div kendoPopoverContainer filter=".has-popover" [popover]="myPopover" showOn="focus">
        <button class="has-popover">Show Popover</button>
        <button>Button Without Popover</button>
        <button class="has-popover">Show Popover</button>
    </div>

When using the kendoPopoverContainer directive only one popover at a time will be displayed for the filtered anchor elements.

The following example demonstrates how to attach a popover to a group of elements.

Popover Callback

The PopoverAnchor and PopoverContainer enable you to apply conditional logic to determine the exact popover instance that should be displayed. To achieve this, pass a PopoverFn callback function to their popover input property. The callback should return the popover instance to be displayed, depending on custom logic.

The following example demonstrates the approach in action.

Suggested Links

• API Reference of the Popover
• API Reference of the PopoverAnchor
• API Reference of the PopoverContainer