New to Kendo UI for Angular? Start a free 30-day trial

PopoverComponent

Represents the Kendo UI Popover component for Angular. Used to display additional information that is related to a target element.

<kendo-popover>
   <ng-template kendoPopoverTitleTemplate>Foo Title</ng-template>
   <ng-template kendoPopoverBodyTemplate>Foo Body</ng-template>
   <ng-template kendoPopoverActionsTemplate>Foo Actions</ng-template>
</kendo-popover>

Selector

kendo-popover

Inputs

Name	Type	Default	Description
animation	`PopoverAnimation`	`false`	Enables and configures the Popover animation. See example The possible options are: `boolean`—Enables the default animation `PopoverAnimation`—A configuration object which allows setting the `direction`, `duration` and `type` of the animation.
body	`string`		Represents the text that will be rendered in the Popover body section. If a `bodyTemplate` is provided it would take precedence over this text.
callout	`boolean`	`true`	Determines whether a callout will be rendered along the Popover. See example
height	`string \| number`	`'auto'`	Determines the height of the popover. Numeric values are treated as pixels.
offset	`number`	`6`	Specifies the distance from the Popover to its anchor element in pixels.
position	`Position`		Specifies the position of the Popover in relation to its anchor element. See example The possible options are: `top` `bottom` `right` (Default) `left`
templateData	`PopoverDataFn`		Defines a callback function which returns custom data passed to the Popover templates. It exposes the current anchor element as an argument. See example
title	`string`		Specifies the main header text of the Popover. If a `titleTemplate` is provided it would take precedence over the title.
width	`string \| number`	`'auto'`	Determines the width of the popover. Numeric values are treated as pixels.

Events

Name	Type	Description
hidden	`EventEmitter<any>`	Fires after the Popover has been hidden and the animation has ended. See example
hide	`EventEmitter<PopoverHideEvent>`	Fires when the Popover is about to be hidden (see example). The event is preventable. If canceled, the Popover will remain visible.
show	`EventEmitter<PopoverShowEvent>`	Fires before the Popover is about to be shown (see example). The event is preventable. If canceled, the Popover will not be displayed. See example
shown	`EventEmitter<PopoverShownEvent>`	Fires after the Popover has been shown and the animation has ended. See example