New to Kendo UI for Angular? Start a free 30-day trial

Default Configuration

To specify elements which render tooltips, wrap these elements in a kendoTooltip directive.

The default configuration of the Tooltip directive enables you to show a custom tooltip instead of the tooltip of the default browser. All elements with the title attribute inside the kendoTooltip directive display a tooltip. If neither a title attribute nor other configuration is provided, the tooltip is not rendered.

Example
View Source
Edit In Stackblitz  
Change Theme:

To prevent the display of the default browser tooltip, the current implementation of the Kendo UI for Angular Tooltip relies on the following approach:

  • When the Tooltip is open:

    • The title attribute value of its anchor element is assigned to a data-title attribute.
    • The title attribute value of its anchor element is set to an empty sting.
  • When the Tooltip is closed, the current value of the data-title attribute is set back to the title attribute.

Angular has a specific behavior when the attr.title and title values are set to null or undefined:

  • The attr.title bindingSetting the value to null or undefined removes the title attribute from the DOM element.
  • The title bindingSetting the value to null or undefined changes the value of the title attribute to the null or undefined string.

In this article

Not finding the help you need?