Updating tooltip text on state change when the element remains hovered over

[Tim]

Hi, I've got a button that toggles a boolean property when clicked. The button has a tooltip that appears on hover, and the tooltip text is set conditionally based on if the property is true or false.

The issue I'm having is that if the button is clicked, the tooltip only changes once you hover outside the button and then hover back over it, it does not change when the button is clicked if the cursor stays hovering on the button.

Is it possible to have the tooltip text change when the button is clicked, if the cursor stays on the button?

app.component.html:

<button
  (click)="toggleProp()"
  kendoTooltip
  [title]="prop ? 'text when prop is true' : 'text when prop is false'"
>
  test
</button>

app.component.ts:

export class AppComponent {
  prop = false;

  toggleProp() {
    this.prop = !this.prop;
  }
}

Demo: https://stackblitz.com/edit/angular-goykum-okj6jk?file=app%2Fapp.component.html

[Tim]

Using a custom tooltip template solved my issue:

import { Component } from '@angular/core';

@Component({
  // eslint-disable-next-line @angular-eslint/component-selector
  selector: 'my-app',
  template: `
      <ng-template #template let-anchor>
          <span>hello: {{ someProp ? 'true' : 'false' }}</span>
      </ng-template>

      <div kendoTooltip [tooltipTemplate]="template" filter="button" style="padding-top: 10px;">
        <button (click)="toggleProp()" class="btn btn-primary">click</button>
      </div>
    `,
})
export class AppComponent {
  someProp = false;

  toggleProp() {
    this.someProp = !this.someProp;
  }
}

https://stackblitz.com/edit/angular-jzqmyl-vtzzhd?file=src%2Fapp%2Fapp.component.ts