Is it possible to have a tooltipTemplate for a ejs-tooltip element?

[Juan Manuel Gago]

Hi, 

I've managed to have the eventSettings with tooltip enabled using a tooltipTemplate. Now requirements have change and I need to be able to show the same tooltip template when hovering above some element text and/or icon in a scheduler event. 

This is what I used to have:

<e-schedule-eventsettings enableTooltip="true" tooltipTemplate="#TemplateForTooltip">

</e-schedule-eventsettings>

This is how I'm using the ejs-tooltip element based on the first answer in this thread:

<ejs-tooltip id="appendedTooltip" target=".taskIcon" mouseTrail="true" content="content"></ejs-tooltip>

...

var taskIcon = args.element.querySelector(".taskIcon");

        if (taskIcon !== null) {

            taskIcon.addEventListener("mouseover", function (e) {

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

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

                if (target) {

                    //alert("Almost there. Need to see how to make this tooltip win over the whole event block one.");

                    tooltipObj.open(target);

                }

            });

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

            taskIcon.addEventListener("mouseout", function (e) {

                tooltipObj.close();

            });

        }

... 

I did, however, try to add an <e-content-template> inside the <ejs-tooltip> element but it was of no use.

[Hareesh Balasubramanian]

Hi Juan, 

Greetings from Syncfusion Support..! 

We have validated your shared query “Now requirements have change and I need to be able to show the same tooltip template when hovering above some element text and/or icon in a scheduler event” at our end. And we suspect that your requirement is to apply your own customized template for the Tooltip. And for that, kindly refer the below UG link. 

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/schedule/appointments/#customizing-event-tooltip-using-template 

Kindly try the above ug link and if we misunderstand your requirement, kindly let us know more details about the use case scenario/video demo/image of your requirements for the better serve. 

Regards, 

Hareesh 

[Juan Manuel Gago]

Hi Juan, 

Greetings from Syncfusion Support..! 

We have validated your shared query “Now requirements have change and I need to be able to show the same tooltip template when hovering above some element text and/or icon in a scheduler event” at our end. And we suspect that your requirement is to apply your own customized template for the Tooltip. And for that, kindly refer the below UG link. 

UG link: https://ej2.syncfusion.com/aspnetcore/documentation/schedule/appointments/#customizing-event-tooltip-using-template 

Kindly try the above ug link and if we misunderstand your requirement, kindly let us know more details about the use case scenario/video demo/image of your requirements for the better serve. 

Regards, 

Hareesh 

Yes, I believe there was a misunderstanding. 

As I said earlier in my question,  I was using e-schedule-eventsettings enableTooltip="true" with a custom template.

But I cannot longer use that because I need  that the tooltip with the custom template is opened while hovering over the title of the event in the scheduler.

And then I need a different one to be displayed when I hover over other element of the event box.

In the image you'll see both case scenarios. One is shown when hovering over the address and the other one when over the icon.

Thanks, 

Juan

[Hareesh Balasubramanian]

Hi Juan, 

Thanks for the update. 

We have validated both the screenshots at our end. And for that, we have prepared a sample, in that we have rendered a customized “chrome” icon using eventTemplate property of the Scheduler. When we hovering the pointer on the event it will display the event details using tooltipTemplate property of the scheduler and while hover the pointer on the icon, we have rendered the Tooltip component for rendering the customized tooltip. And the sample can be downloaded from the following link. 

Sample: https://www.syncfusion.com/downloads/support/forum/157012/ze/Sample-249112195  

Code snippet: 

    function onBound() { 

        document.querySelector('.e-appointment').addEventListener('mouseover', function (e) { 

            if (e.target.classList.contains('fa')) { 

                var target = ej.base.closest(e.target, '.fa'); 

                if (target) { 

                    var hoverTar = e.target.parentElement.parentElement.parentElement; 

                    var schObj = document.querySelector(".e-schedule").ej2_instances[0]; 

                    var content = schObj.getEventDetails(hoverTar).Subject; 

                    document.querySelector(".e-schedule-event-tooltip").style.display = "none"; 

                    var tooltipObj = document.querySelector('#Tooltip').ej2_instances[0]; 

                    tooltipObj.open(target); 

                    tooltipObj.content = content; 

                } 

            } else { 

                if (!ej.base.isNullOrUndefined(document.querySelector(".e-schedule-event-tooltip"))) { 

                    document.querySelector(".e-schedule-event-tooltip").style.display = ""; 

                } 

                document.querySelector('#Tooltip').ej2_instances[0].close(); 

            } 

        }) 

    } 

And for further reference, kindly refer the below screenshots, 

While hovering on the event: 

 

While hovering on the icon: 

 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Juan Manuel Gago]

Thanks for your answer. I'll try it and let you know.

[Vengatesh Maniraj]

Hi Juan, 

You are most welcome. 

Please contact us at your convenience. We will wait to hear the testing results.   

Regards, 

Vengatesh