@progress/kendo-angular-tooltip
Version:
Kendo UI Tooltip for Angular - A highly customizable and easily themeable tooltip from the creators developers trust for professional Angular components.
196 lines (195 loc) • 7.03 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { Position } from '../models/position.type';
import { PopoverDataFn } from '../models/functions.model';
import { PopoverTitleTemplateDirective } from './template-directives/title-template.directive';
import { PopoverBodyTemplateDirective } from './template-directives/body-template.directive';
import { PopoverActionsTemplateDirective } from './template-directives/actions-template.directive';
import { PopoverHideEvent, PopoverShowEvent, PopoverShownEvent } from '../models/events';
import { PopoverAnimation } from '../models/animation.model';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI Popover component for Angular]({% slug overview_popover %}).
* Displays additional information related to a target element.
*
* @example
* ```html
* <kendo-popover>
* <ng-template kendoPopoverTitleTemplate>Title</ng-template>
* <ng-template kendoPopoverBodyTemplate>Body</ng-template>
* <ng-template kendoPopoverActionsTemplate>Actions</ng-template>
* </kendo-popover>
* ```
*/
export declare class PopoverComponent implements OnInit, AfterViewInit, OnDestroy {
private localization;
private renderer;
private element;
private zone;
/**
* @hidden
*/
anchor: Element;
/**
* Specifies the position of the Popover relative to its anchor element. [See example]({% slug positioning_popover %}).
*
* @default 'right'
*/
position: Position;
/**
* Specifies the distance from the Popover to its anchor element in pixels.
*
* @default 6
*/
set offset(value: number);
get offset(): number;
/**
* Determines the width of the Popover. Numeric values are treated as pixels.
*
* @default 'auto'
*/
set width(value: number | string);
get width(): string | number;
/**
* Determines the height of the Popover. Numeric values are treated as pixels.
*
* @default 'auto'
*/
set height(value: number | string);
get height(): string | number;
/**
* @hidden
*/
direction: 'ltr' | 'rtl';
/**
* Specifies the main header text of the Popover. If a `titleTemplate` is provided, it takes precedence.
*/
title: string;
/**
* @hidden
* Specifies the secondary header text of the Popover.
*
* If a `titleTemplate` is provided it would take precedence over the subtitle.
*/
subtitle: string;
/**
* Represents the text rendered in the Popover body section. If a `bodyTemplate` is provided, it takes precedence.
*/
body: string;
/**
* Determines whether a callout is rendered along the Popover. [See example]({% slug callout_popover %}).
*
* @default true
*/
callout: boolean;
/**
* Enables and configures the Popover animation. [See example]({% slug animations_popover %}).
*
* Accepts a boolean to enable the default animation, or a `PopoverAnimation` object for custom settings.
*
* @default false
*/
animation: PopoverAnimation;
/**
* Defines a callback function that returns custom data for the Popover templates.
* The function exposes the `anchor` element as an argument and returns an object that can be used in the templates. [See example](slug:templates_popover#toc-passing-data-to-templates).
*/
set templateData(fn: PopoverDataFn);
get templateData(): PopoverDataFn;
/**
* @hidden
* Determines the visibility of the Popover.
*/
visible: boolean;
/**
* @hidden
*/
get isHidden(): boolean;
/**
* @hidden
*/
get hasAttributeHidden(): boolean;
/**
* Fires before the Popover is shown. The event is preventable. If canceled, the Popover will not display. [See example]({% slug events_popover %}).
*/
show: EventEmitter<PopoverShowEvent>;
/**
* Fires after the Popover has been shown and the animation has ended. [See example]({% slug events_popover %}).
*/
shown: EventEmitter<PopoverShownEvent>;
/**
* Fires when the Popover is about to be hidden. The event is preventable. If canceled, the Popover remains visible. [See example]({% slug events_popover %}).
*/
hide: EventEmitter<PopoverHideEvent>;
/**
* Fires after the Popover has been hidden and the animation has ended. [See example]({% slug events_popover %}).
*/
hidden: EventEmitter<any>;
/**
* @hidden
*/
closeOnKeyDown: EventEmitter<any>;
/**
* @hidden
*/
popoverWrapper: ElementRef;
/**
* @hidden
*/
titleTemplateWrapper: ElementRef;
/**
* @hidden
*/
bodyTemplateWrapper: ElementRef;
/**
* @hidden
*/
titleTemplate: PopoverTitleTemplateDirective;
/**
* @hidden
*/
bodyTemplate: PopoverBodyTemplateDirective;
/**
* @hidden
*/
actionsTemplate: PopoverActionsTemplateDirective;
/**
* @hidden
*/
contextData: any;
/**
* @hidden
*/
_width: string;
/**
* @hidden
*/
_height: string;
/**
* @hidden
*/
popoverId: string;
private _offset;
private subs;
constructor(localization: LocalizationService, renderer: Renderer2, element: ElementRef, zone: NgZone);
ngOnInit(): void;
ngAfterViewInit(): void;
ngOnDestroy(): void;
/**
* @hidden
*/
getCalloutPosition(): any;
/**
* @hidden
*/
onKeyDown(event: any): void;
private _templateData;
private keepFocusWithinComponent;
private setAriaAttributes;
static ɵfac: i0.ɵɵFactoryDeclaration<PopoverComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<PopoverComponent, "kendo-popover", never, { "position": { "alias": "position"; "required": false; }; "offset": { "alias": "offset"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "title": { "alias": "title"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "body": { "alias": "body"; "required": false; }; "callout": { "alias": "callout"; "required": false; }; "animation": { "alias": "animation"; "required": false; }; "templateData": { "alias": "templateData"; "required": false; }; }, { "show": "show"; "shown": "shown"; "hide": "hide"; "hidden": "hidden"; "closeOnKeyDown": "closeOnKeyDown"; }, ["titleTemplate", "bodyTemplate", "actionsTemplate"], never, true, never>;
}