• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Tooltips / API / PopoverComponent / 
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

NameTypeDefaultDescription

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

NameTypeDescription

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

In this article

Not finding the help you need?

Contact Support