We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change Tooltip based on conditional data ?

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 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>


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

4 Replies 1 reply marked as answer

JR Jawahar Rajan February 24, 2023 11:11 PM UTC

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

SA SureshRajan Alagarsamy Syncfusion Team February 27, 2023 02:19 PM UTC

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 :



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

      <!-- Button element -->

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





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.


Marked as answer

JR Jawahar Rajan February 27, 2023 04:37 PM UTC

hi Suresh
Thanks for the update

It works as we want thank you

IL Indhumathy Loganathan Syncfusion Team March 1, 2023 07:51 AM UTC

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

Live Chat Icon For mobile
Up arrow icon