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 thetitleconfiguration option or define atitle template.body—Represents the main content section of the popover. To configure the body, either pass a string to thebodyconfiguration option or define abody template.actions—Represents an action buttons section that will be displayed below thebody. To configure the popover actions, define anactions template.
<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
The popover enables you to display it in relation to a single DOM element. To achieve this:
- Apply the
kendoPopoverAnchordirective to the element that should display the popover.
<button kendoPopoverAnchor>Show Popover</button>- Pass a popover instance to the
popoverinput of thekendoPopoverAnchordirective.
<button kendoPopoverAnchor [popover]="myPopover">Show Popover</button>
<kendo-popover #myPopover title="Header content" body="Main content">
</kendo-popover>- Optionally configure the type of user interaction, on which the popover should be displayed by setting the
showOnoption of thekendoPopoverAnchordirective. By default it will be displayed onclick.
<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:
- Apply the
kendoPopoverContainerdirective to the most outer wrapping element which will hold the popover anchors.
<div kendoPopoverContainer></div>- Set the
filteroption of thekendoPopoverContainerdirective. It is used to determine the child elements, which will serve as popover anchors. Thefilteroption accepts a string value, representing any valid query selector.
<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>- Pass a popover instance to the
popoverinput of thekendoPopoverContainerdirective.
<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>- Optionally configure the type of user interaction, on which the popovers should be displayed by setting the
showOnoption of thekendoPopoverContainerdirective. By default they will be displayed onclick.
<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
kendoPopoverContainerdirective 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.