Change Tooltip based on conditional data ?

[Jawahar Rajan]

Hello Currently we are using two Tooltips to show different messages based on a data value

<ejs-tooltip content='Add to Watchlist' position="RightCenter" (beforeRender)="onBeforeRender($event)">

  <i *ngIf="(data.Watchlist) === false" (click)="watchlistAddRemove(data, true)" class="fa fa-star" style="color: lightgrey"></i>

</ejs-tooltip>

<ejs-tooltip content='Remove from Watchlist' position="RightCenter(beforeRender)="onBeforeRender($event)">

  <i *ngIf="(data.Watchlist) === true" (click)="watchlistAddRemove(data, false)" class="fa fa-star" style="color: yellow"></i>

</ejs-tooltip>

we would like to have just one tooltip and change the content based on the data.Watchlist value ?
and also be able to change the css style color on click of the star icon

Is it possible to us ngClass to change the style. The class will always be fa fa star but want to change the font color

[Jawahar Rajan]

Do I have to use  queryCellInfo event to set color property of the star ?

[SureshRajan Alagarsamy]

Hi Jawahar,

Greetings from Syncfusion support.

From your shared query, we understand that you want to add content to the Tooltip dynamically based on conditions. We have created a sample that demonstrates how to change the Tooltip content based on a condition in a button click event. Refer to the code snippet below for further reference.

Code Snippet :

[app.Component.html]

 

<ejs-tooltip #tooltip content="Loding...">

      <!-- Button element -->

      <button ejs-button (click)="onClick()">Show Tooltip</button>

</ejs-tooltip>

 

[app.Component.ts]

 

public control: TooltipComponent;

public count: number = 0;

 

public onClick() {

  if (this.count % 2 == 0) {

    this.control.content = 'Go-Green';

  } else {

    this.control.content = 'Go-Green and Save Earth';

  }

  this.count += 1;

}

 

For you reference, we have attached the sample.

Sample : https://stackblitz.com/edit/angular-8dsag3-jm2lft?file=src/app.component.html

Check out the shared details and get back to us if you need any further assistance.

Regards,
Suresh.

[Jawahar Rajan]

hi Suresh
Thanks for the update

It works as we want thank you

[Indhumathy Loganathan]

Jawahar, we are glad to know that your reported query has been resolved. Please get back to us if you need any further assistance.