Components / Tooltip / API

TooltipDirective

Represents the Kendo UI Tooltip directive for Angular.
Used to display additional information that is related to an element.

<div kendoTooltip>
   <a title="Tooltip title" href="foo">foo</a>
</div>

Selector

[kendoTooltip]

Export Name

Accessible in templates as #kendoTooltipInstance="kendoTooltip"

Inputs

callout boolean

Specifies if the Тooltip will display a callout arrow.

The possible values are:

  • true (default)
  • false

closable boolean

Specifies if the Тooltip will display a Close button
(see example).

The possible values are:

  • true
  • false

closeTitle string

Specifies the title of the close button.

collision Collision

Provides screen boundary detection when the Тooltip is shown.

filter string

Specifies a selector for elements within a container which will display a tooltip
(see example). The possible values include any
DOM selector. The default value is [title].

offset number

Specifies the offset in pixels between the Tooltip and the anchor. Defaults to 6 pixels.
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

Specifies the position of the Tooltip that is relative to the
anchor element (see example).

The possible values are:

  • top (default)
  • bottom
  • left
  • right

showAfter number

Specifies the delay in milliseconds before the Tooltip is shown.

  • 100 (default) milliseconds.

showOn ShowOption

Specifies when the Тooltip will be rendered
(see example).

The possible values are:

  • hover (default)
  • click
  • none

titleTemplate? TemplateRef<any>

Renders the passed template as a header title of the Tooltip
(see example).

tooltipClass string

Specifies a CSS class that will be added to the Tooltip.

tooltipHeight number

Specifies the height of the Тooltip.

tooltipWidth number

Specifies the width of the Тooltip (see example).

tooltipTemplate TemplateRef<any>

Sets the content of the Tooltip as a template reference
(see example).

Methods

hide

Hides the Tooltip.

show

Shows the Tooltip.

Parameters

anchor ElementRef | Element

toggle

Toggle visibility of the Tooltip.

Parameters

anchor ElementRef | Element
show? boolean