How to add an icon with a tooltip to some events

[Juan Manuel Gago]

Hi ! 

I need to assign an icon to a type of event, and to each icon a tooltip.

To differentiate events, I add a property "EventType" to them.

The events areLoaded differently, each time a view is chosen or a new date is chosen. 
Some events need two tooltips.

How could I add this icon and tooltip ? 

I attach this image to you, so you see what I need

Again I would very much appreciate your help, Greetings !!

[Balasubramanian Sattanathan]

Hi Juan Manuel Gago, 

 

Greetings from Syncfusion Support. 

 

We have validated your requirement and prepared a sample based on that using eventRendered event like below code snippet. In below sample, the tooltip will be shown for the events, those have the property Enable as true only. 

 

var data = [ 

  { 

    Id: 1, 

    Subject: "App-1", 

    StartTime: new Date(2018, 1, 11, 0, 0), 

    EndTime: new Date(2018, 1, 11, 2, 30), 

    Enable: true 

  }, 

  { 

    Id: 2, 

    Subject: "App-2", 

    StartTime: new Date(2018, 1, 11, 3, 0), 

    EndTime: new Date(2018, 1, 11, 4, 30), 

    Enable: false 

  }, 

  { 

    Id: 2, 

    Subject: "App-3", 

    StartTime: new Date(2018, 1, 12, 12, 0), 

    EndTime: new Date(2018, 1, 12, 14, 0), 

    Enable: false 

  } 

]; 

 

 

function onEventRendered(args) { 

  var tooltipObj = document.querySelector('.e-tooltip').ej2_instances[0]; 

  if (args.data.Enable) { 

    args.element.querySelector(".custom").addEventListener("mouseover", function (e) { 

      var target = args.element.querySelector('.custom'); 

      // To open the tooltip on mouse hover to icon element 

      if (target) { 

        tooltipObj.open(target); 

      } 

    }); 

    // To close the tooltip on mouse out from icon element 

    args.element.querySelector(".custom").addEventListener("mouseout", function (e) { 

      tooltipObj.close(); 

    }); 

  } 

} 

 

Sample: https://stackblitz.com/edit/mhbzr2-gsxhf3?file=index.js 

 

Kindly try the above sample and let us know if you have any concerns. 

 

Regards, 

Balasubramanian S 

[Juan Manuel Gago]

Hi again, 

That worked fine. But I'm still having issues when using e-schedule-eventsettings enableTooltip = true and the custom ejs-tootlip at the same time. 

Is there any way they can both co-exist??  The requirements I have is to have a general tooltip (for that reason is that I'm using enableTooltip on the eventsettings) and if there is an icon, to be able to hover over it and get some information.

Thanks in advance!

Juan

[Balasubramanian Sattanathan]

Hi  Juan Manuel Gago, 

 

Thanks for your update. 

We have validated your requirement “Is there any way they can both co-exist??” at our side and prepared a sample based on that by using the below code snippet. In the below sample, we have used default schedule tooltip enableToolTip=true and custom tooltip also. We would suggest you to follow and refer the below sample. 

Sample: https://stackblitz.com/edit/angular-eragrr-pmdhtk?file=app.component.ts 

 

Kindly try the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S