1. Home
  2. Forum
  3. Angular - EJ 2
  4. Tooltip

Tooltip

Hello.
I need to make sure that when I hover on an appointment (any view), a tooltip comes out that is a sort of menu in which I can select items.
Can anyone give me a complete example of how to do it?
Which modules should I import and how to do it? (e.g. what to do on 'app.model.ts' and any other files)

Thanks for the information you will give me.
A greeting
Alfredo

7 Replies
VM Vengatesh Maniraj Syncfusion Team April 30, 2020 06:28 AM UTC

Hi Alfredo, 
 
Greetings from Syncfusion Support. 
 
We have validated  your requirement that “when I hover on an appointment (any view), a tooltip comes out” and we can achieve this requirement by enabling the enableTooltip option from eventSettings property. And also we can customize it by tooltipTemplate option. We have demonstrated the sample online for this feature that can be available in the below link. 
 

Which modules should I import and how to do it? 
By default, the scheduler has the option to show the tooltip. So we do not need to import any modules. 

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

Regards, 
Vengatesh  


AL Alfredo April 30, 2020 01:31 PM UTC

I read your answers that have been helpful (thanks!).
But now I have to think about customizing the tooltip. When I talk about customization, I don't mean style, but functional.
Let me explain!
I should make it possible for the tooltip to display a number of choices (and now I can do this).
But now I should:
- be able to select some (therefore issue a 'click' event, to which to associate some information relating to the appointment)
- understand the event (then intercept it and retrieve the information) in order to manage it appropriately

can you help me?
Thanks

Another question!
In my project, I set the tooltip's 'position' to 'RightCenter'.
I noticed that if the 'target' is too far to the right, the 'position' of the tooltip changes automatically ('RightTop' or 'RightBottom')
Is there a way to know the currently set 'position'? (not what I set up initially)

BS Balasubramanian Sattanathan Syncfusion Team May 1, 2020 03:29 PM UTC

Hi Alfredo, 
 
Thanks for the reply. 
 
We have validated your requirement at our side and we suspect that, your need is to render the different choices(like button, checkbox) in the tooltip and which is possible by using the below code snippet. In the below sample, The tooltip is rendered with three buttons, each button will be displayed the appointment details in the console window. 
 
app.component.ts : 
onCreated(args): void { 
  let tooltipObj = (this.scheduleObj.element as any).ej2_instances[1]; 
  tooltipObj.mouseTrail = false; 
  tooltipObj.position = "Top" 
} 
 
onBtnClick(args): void { 
  console.log(args) 
} 
 
app.component.html : 
<ng-template #eventSettingsTooltipTemplate let-data> 
  <div class="tooltip-wrap"> 
    <div> 
      <button #subBtn ejs-button cssClass='e-info' (click)='onBtnClick(data.Subject)'> Title </button> 
    </div> 
    <div> 
      <button #eventTypeBtn ejs-button cssClass='e-info' (click)='onBtnClick(data.EventType)'> Type </button> 
    </div> 
    <div> 
      <button #cityBtn ejs-button cssClass='e-info' (click)='onBtnClick(data.City)'> Location </button> 
    </div> 
  </div> 
</ng-template> 
 
 
If we misunderstood, kindly share the below details with us for the better serve. 
  • Share the Scheduler related code
  • Share the requirement with video demo
  • Share the use case scenario
 
Regards, 
Balasubramanian S 


AL Alfredo May 2, 2020 12:21 PM UTC

Hi.
The information and example you provided me are very similar to my demanding ones. With some tricks I managed to get the result I expected. Thanks!

Unfortunately you didn't answer my last question:
"Another question!
In my project, I set the tooltip's 'position' to 'RightCenter'.
I noticed that if the 'target' is too far to the right, the 'position' of the tooltip changes automatically ('RightTop' or 'RightBottom')
Is there a way to know the currently set 'position'? (not what I set up initially) ".

Maybe it is not possible to have the requested information?

BS Balasubramanian Sattanathan Syncfusion Team May 6, 2020 01:50 PM UTC

Hi Alfredo, 
 
Thanks for your update. 
 
We have checked with your query. When there is not enough space available adjacent to the target element to render tooltip element, then by using collision detection functionality tootip element will appear anywhere around the target element based on the available free space. However, this change will not be reflected in the Position property value since the position change will vary based on the change in browser dimension.  
  
So, we don’t have option to find the dynamically changed position value in Tooltip component.  
  
Please, let us know if you have any concerns.  
 
Regards, 
Balasubramanian S 


AL Alfredo May 7, 2020 05:04 AM UTC

Hi.
My need is to strongly customize the management of the tooltip. Not having the syncfusion tooltip, the possibility of being controlled in a pushed way, I will try to write me a component that suits my needs. Thanks anyway for your interest. You are always very helpful.
Thanks

VM Vengatesh Maniraj Syncfusion Team May 8, 2020 04:43 AM UTC

Hi Alfredo, 

You are most welcome.  

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

Regards, 
Vengatesh  


Loader.
Up arrow icon