TooltipDirective

Represents the Kendo UI Tooltip directive for Angular. Displays additional information related to an element.

html

<div kendoTooltip>
  <button kendoButton title="Save">Save</button>
</div>

Selector

[kendoTooltip]

Export Name

Accessible in templates as #kendoTooltipInstance="kendoTooltip"

Inputs

Name	Type	Default	Description
callout	boolean	true	Determines if the Tooltip displays a callout arrow.
closable	boolean	false	Determines if the Tooltip displays a Close button. See example.
closeTitle	string		Sets the title of the Close button.
collision	Collision		Provides screen boundary detection when the Тooltip is shown.
filter	string	'[title]'	Specifies a selector for elements within a container that display a tooltip (see example). The possible values include any DOM selector.
offset	number	6	Specifies the offset in pixels between the Tooltip and the anchor. If the callout property is set to true, the offset is rendered from the callout arrow. If the callout property is set to false, the offset is rendered from the content of the Tooltip.
position	Position	'top'	Specifies the position of the Tooltip relative to the anchor element (see example).
showAfter	number	100	Specifies the delay in milliseconds before the Tooltip is shown.
showOn	ShowOption		Specifies the mouse action that triggers the Tooltip to show. See example.
titleTemplate?	TemplateRef<any>		Sets the template for the tooltip header title. See example.
tooltipClass	string		Sets a CSS class for the Tooltip.
tooltipHeight	number		Sets the height of the Tooltip.
tooltipTemplate	TemplateRef<any>		Sets a custom content template for the Tooltip. The template is rendered inside the Tooltip content area. See example.
tooltipWidth	number		Sets the width of the Tooltip. See example.

Methods

hide
Hides the Tooltip.

show
Shows the Tooltip.
Parameters anchor Element | ElementRef<any> The element used as an anchor. The Tooltip opens relative to this element.

toggle
Toggles the visibility of the Tooltip.
Parameters anchor Element | ElementRef<any> The element used as an anchor. show? boolean Optional. Boolean. Specifies if the Tooltip is rendered.