tooltip when dragging event

[Alfredo]

Hello.

I'm trying to use the Syncfusion tooltip again.

I would need to make the tooltip appear when I start the drag & drop of an event and throughout the dragging period, up to the 'drag stop'. During the dragging, I will have to display some information related to the cells that I am going to cross. The important thing is that the tooltip should always follow the mouse pointer. Is it possible to do all this? Is it possible to have a minimal example of how to do it all ?.

Specifically, I can't
- to hook the display of the tooltip to the 'left button down' of the mouse
- to follow the tooltip, the mouse pointer

Thanks in advance for your time.

[Sowmiya Padmanaban]

Hi Alfredo,  

  

Greetings from Syncfusion support. 

  

We have checked your reported query with Tooltip component. We suspect that your requirement is to display tooltip when dragging a element. In our sample browser we have displayed a similar sample using dragging event. 

  

Refer the sample link below. 

https://ej2.syncfusion.com/angular/demos/#/material/tooltip/smart-position 

  

Based on your shared details, we were unable to predict that which component you want to display the tooltip component. So, could you please share the following details for your requirement. 

1.      Which component you want to display the tooltip element? 

2.      Share the screenshot/ Video footage of your requirement. 

  

Please let us know, if you have any concerns. 

  

Regards,  

Sowmiya.P 

[Alfredo]

Hello.
I apologize for the lack of information. The component on which I must display the tooltip is the 'scheduler', on the daily, weekly and monthly views

[Vengatesh Maniraj]

Hi Alfredo, 

Thanks for the update. 

We checked the possibilities to show the cell details in tooltip while dragging the events but we regret to let you know that we could not show the cell details in the tooltip while dragging the events with our current Scheduler’s architecture. Because the tooltip action has disabled while dragging the event in our source end and we have updated the event’s details while dragging it by handling the cloned element of the target event. 

Please get back to us if you need any further assistance. 

Regards, 

Vengatesh 

[Alfredo]

Hello.
Unfortunately my English is not very good, so I'm afraid I didn't understand the answer well. If the problem you are reporting to me is the inability to display the contents of the cells on which I hover in the tooltip, I inform you that I was able to display the information I needed (date and time of the cells).
Now my big problem is that of being able to constantly (and fluidly) display the tooltip (during dragging) near the mouse pointer. Although I set the mouseTrail = 'true' property, the tooltip always appears to be docked to the cell, rather than the mouse pointer.
Is it possible to position the tooltip near the mouse pointer?

[Alfredo]

Hello.
I attempted to better analyze your latest answer ("Because the tooltip action has disabled while dragging the event in our source end and we have updated the event's details while dragging it by handling the cloned element of the target event"). I think I understand that the "schedule component", when dragging, automatically displays a copy of the appointment that is being moved. If so, I would like to take advantage of this behavior, but is there a way to vary the content of this copy? If possible, I would like to add the date and time of the cell I'm hovering over
Thanks in advance

[Vengatesh Maniraj]

Hi Alfredo,

 

Thanks for the update.

 

We can change the content of the copy of appointment while dragging by making use of drag event. In that event, you can replace the content text as per our requirement like below,

 

onDragging(args){

      let date =  this.instance.formatDate(args.data.StartTime, { skeleton: 'yMMMEd' });

      let time = this.instance.formatDate(args.data.StartTime, { skeleton: 'hm' }) + this.instance.formatDate(args.data.EndTime, { skeleton: 'hm' });

    document.querySelector('.e-drag-clone .e-appointment-details').replaceWith("Date: "+ date + "\n" + "Time: "+ time);

    }

 

For your reference, we have prepared the sample to change the content text while dragging the appointment that can be available in the below link.

 

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

 

Please check the above sample and get back to us if you need any further assistance.

 

Regards,

Vengatesh 

[Alfredo]

Hello.
Thanks for collaboration.
I tried what you suggested me to do

document.querySelector ('. e-drag-clone .e-appointment-details'). replaceWith ("Date:" + date + "\ n" + "Time:" + time);

but during execution of the program, in console I receive the following error message:

ERROR TypeError: Cannot read property 'replaceWith' of null
From some evidence I have done, it would appear that the querySelector does not find the .e-appointment-detail class.
I also attach app.component.ts and app.component.html
Please give me new directions
Thank you

Attachment: app_794a09d3.7z

[Vengatesh Maniraj]

Hi Alfredo, 

 

Thanks for the update. 

 

We checked the shared files by you and found the cause for this problem is that you have used the template for the events. So the default element structure for events is not available there and throws the error. Now we have changed the drag event functionality like below code based on your eventTemplate structure. 

onDragging(args){ 

      let date =  this.instance.formatDate(args.data.StartTime, { skeleton: 'yMMMEd' }); 

      let time = this.instance.formatDate(args.data.StartTime, { skeleton: 'hm' })+' - ' + this.instance.formatDate(args.data.EndTime, { skeleton: 'hm' }); 

    (document.querySelector('.e-drag-clone .time') as HTMLElement).innerText = "Date: "+ date + "\n" + "Time: "+ time; 

    } 

 

Sample: https://stackblitz.com/edit/angular-f5xwgu-7txr2p?file=app.component.ts 

 

Kindly check the above sample and get back to us if you need any further assistance. 

 

Regards, 

Vengatesh  

[Alfredo]

OK!

Thanks for your cooperation!

[Vengatesh Maniraj]

Hi Alfredo, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 

Vengatesh