Kendo-angular: Tooltip does not display proper title

Created on 8 Feb 2019 · 3Comments · Source: telerik/kendo-angular

I'm submitting a...

Bug report

Current behavior

When changing the title of the Button, the Tooltip does no display the updated title.

Minimal reproduction of the problem with instructions

Check the following example:
https://stackblitz.com/edit/angular-cbj2bw-ntgzsc?file=app/app.component.ts

Bug tooltip

Source

svetq

Most helpful comment

Use tooltip.toggle() method to change the tooltip message. In the component code, get the TooltipDirective instance through a @ViewChild property. Use the Tooltip API to show, hide, or toggle the Tooltip.


`import { Component, ChangeDetectorRef,ViewChild } from '@angular/core';
import { TooltipDirective } from '@progress/kendo-angular-tooltip';

@component({
selector: 'my-app',
template: `<div kendoTooltip style="text-align: center; padding-top: 10px;"> <button #btn class="k-button k-primary" [title]="msg" (click)="change(btn)" value="{{msg}}"> save </button> {{ msg }} </div>`
})
export class AppComponent {
public msg = "original message";
@ViewChild(TooltipDirective)
public tooltipDir: TooltipDirective;
change(btn){
this.msg= this.msg == 'changed message' ? "original message" : "changed message";
this.tooltipDir.toggle(btn);
}
}`

mct123 on 14 Feb 2019

🎉1 👍1

All 3 comments


`import { Component, ChangeDetectorRef,ViewChild } from '@angular/core';
import { TooltipDirective } from '@progress/kendo-angular-tooltip';

@component({
selector: 'my-app',
template: `<div kendoTooltip style="text-align: center; padding-top: 10px;"> <button #btn class="k-button k-primary" [title]="msg" (click)="change(btn)" value="{{msg}}"> save </button> {{ msg }} </div>`
})
export class AppComponent {
public msg = "original message";
@ViewChild(TooltipDirective)
public tooltipDir: TooltipDirective;
change(btn){
this.msg= this.msg == 'changed message' ? "original message" : "changed message";
this.tooltipDir.toggle(btn);
}
}`

mct123 on 14 Feb 2019

🎉1 👍1

The fix is available in the latest dev version of the package.