• Components
    • Barcodes
    • Buttonsupdated
    • Charts
    • Conversational UI
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdowns
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Iconsupdated
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Mapbeta
    • Menus
    • Navigationupdated
    • Notification
    • Pagerupdated
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • ToolBarupdated
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Tooltips / API / TooltipDirective / 
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

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.

tooltipTemplate

TemplateRef<any>

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

tooltipWidth

number

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

Methods

hide

Hides the Tooltip.

show

Shows the Tooltip.

Parameters

anchor

Element | ElementRef<any>

toggle

Toggle visibility of the Tooltip.

Parameters

anchor

Element | ElementRef<any>

show?

boolean

In this article

Not finding the help you need?

Contact Support