• 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
    • Layout
    • 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 / PopoverContainerDirective / 
New to Kendo UI for Angular? Start a free 30-day trial

PopoverContainerDirective

Represents the kendoPopoverContainer directive. It is used to filter and target multiple elements, which should display a popover on interaction.

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

Selector

[kendoPopoverContainer]

Export Name

Accessible in templates as #kendoPopoverContainerInstance="kendoPopoverContainer"

Inputs

NameTypeDefaultDescription

filter

string

Specifies a selector for the elements that should display a popover.

The possible values include any valid query selector. See example

popover

PopoverFn | PopoverComponent

Specifies the popover instance that will be rendered. Accepts a PopoverComponent instance or a PopoverFn callback which returns a PopoverComponent instance depending on the current anchor element.

See example

showOn

PopoverShowOption

The event on which the Popover will be shown

The supported values are:

  • click (default) —The Popover will be shown when its anchor element is clicked.
  • hover—The Popover will be shown when its anchor element is hovered.
  • focus—The Popover will be shown when its anchor element is focused.
  • none—The Popover will not be shown on user interaction. It could be rendered via the Popover API methods.

Methods

hide

Hides the Popover (See example).

show

Shows the Popover.

Parameters

anchor

Element | ElementRef<any>

toggle

Toggles the visibility of the Popover. See example

Parameters

anchor

Element | ElementRef<any>

In this article

Not finding the help you need?

Contact Support