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

Keep Tooltip open, so i can click a button inside the tooltip

I've seen that other tooltips within syncfusion have the [isSticky] option, that leaves the tooltip open until a user closes it, on hover it can close right away, but when a user clicks the marker, the tooltip should stay open. 

I need to be able to customize the tooltip look to allow for n different containers inside the tooltip, each container should contain a button/link that will have some action outside of the chart when a user clicks it.

Is that possible? 

10 Replies

SM Srihari Muthukaruppan Syncfusion Team May 14, 2020 11:45 PM

Hi Andrew,

We have analyzed your query. From that, we can achieve your requirement using pointClick event and template property. But as of now in the tooltip button click does not work we are working on this we will update the status within one business day (May 15, 2020). We appreciate your patience until then.

Regards,
Srihari M



SM Srihari Muthukaruppan Syncfusion Team May 18, 2020 08:58 AM

Hi Andrew,

We have analyzed your query. From that, we can achieve your requirement using pointClick event and template property. Based on your requirement we have prepared a sample for your reference. Please find the sample, code snippet, and screenshot for your reference.


Code Snippet: 
app.component.html:
<ejs-chart style='display:block' align='center' id='container'
            [tooltip]='tooltip' (load)='load($event)' (pointClick)='pointClick($event)' >
// add your additional code here
 </ejs-chart>


app.component.ts:  
// add your additional code here
public tooltip: Object = {
        enable: true,
        template:
        '<div id="Tooltip"><table style="width:100%;  border: 1px solid black;" class="table-borderless">' +
        '<tr><th rowspan="2" style="background-color: #C1272D"><div><button ejs-button cssClass="e-info" (click)="onChange($event)" style="text-transform:none !important">Close</button></div>' +
         '</th><td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 14px; color: #E7C554; font-weight: bold; padding-left: 5px">' +
         '${y}</td></tr><tr ><td style="height: 25px; width: 50px; background-color: #C1272D; font-size: 18px; color: #FFFFFF; font-weight: bold; padding-left: 5px">${x}</td>' +
         '</tr></table></div>'
    };

public pointClick(args: IPointEventArgs): void {
        var tooltip = document.getElementById('container_tooltipparent_template');
        tooltip.className += "addCSS";
    };

app.component.css:

.control-fluid {
    padding: 0px !important;
}
.addCSS {
    display: block !important;
}
#container_tooltip{
  pointer-events: all !important;
}
  

Screenshot:


Let us know if you have any concerns.

Regards,
Srihari M



AT Andrew Tarr May 19, 2020 04:05 PM

When i checked out the sample, and on my local machine...adding display: block !important didnt seem to have any effect on the normal 'open' time of the tooltip.


SM Srihari Muthukaruppan Syncfusion Team May 20, 2020 09:38 AM

Hi Andrew, 
  
We have analyzed your query. We are not clear about the requirement. However, we suggest you to use “pointClick” event which is triggered by clicking the marker to display the tooltip even when the cursor is not over the point. We also would like to let you know that while clicking on a point and hovering to another point the new tooltip will be rendered. Please find the below sample and code snippet for your reference. 
  
  
Code Snippet: 
    
public pointClick(args: IPointEventArgs): void { 
        var tooltip = document.getElementById('container_tooltipparent_template'); 
        alert('triggered'); 
        tooltip.className += "addCSS"; 
    }; 
  
If you can’t achieve your requirement using this. Kindly revert us with more information which will be more helpful for further analysis and provide you the solution sooner. 
  
Regards, 
Srihari M 



AT Andrew Tarr May 21, 2020 08:42 AM

Sorry, you are right the below does keep it open on click...just the click isnt triggered every time, which is unfortunate. Is there a way to guarantee a click is registered when?

To reproduce: hover and click on any of the marker. If you do this very slow and methodically, it seems to work ok...if you point, click, move cursor it seems to only work sometimes.


SM Srihari Muthukaruppan Syncfusion Team May 22, 2020 09:04 AM

Hi Andrew, 
  
We have analyzed your query. We are able to reproduce the reported scenario. We consider this scenario as a bug and we have logged a bug task on this. It can be tracked through our feedback portal below. 
  
  
The fix for this issue is estimated to be available on or before May 26th, 2020. We appreciate your patience until then 
  
Regards, 
Srihari M 



SM Srihari Muthukaruppan Syncfusion Team May 27, 2020 08:40 AM

Hi Andrew, 
  
Sorry for the inconvenience. 
  
Due to some technical difficulties, we couldn't include the fix in this patch release. We will include the fix in our upcoming weekly patch release which is expected to be rolled out on or before June 2, 2020. We appreciate your patience until then. 
  
Regards, 
Srihari M 



SM Srihari Muthukaruppan Syncfusion Team June 3, 2020 05:09 AM

Hi Andrew, 
  
Thanks for being patience. 

 
We are glad to announce that our v18.1.55  patch release is rolled out, we have added the fix for the point click doesnot triggers and is available for download under the following link. 
  
  
  
We appreciate your patience in waiting for this release. Let me know if you need further assistance. 

 
Regards,  
Srihari M 



AT Andrew Tarr June 3, 2020 08:04 AM

Thanks!


SM Srihari Muthukaruppan Syncfusion Team June 3, 2020 11:27 PM

Hi Andrew,  
  
Most welcome. Kindly get in touch with us, if you would require further assistance. We are always happy in assisting you.    
    
Thanks,    
Srihari M  



Loader.
Live Chat Icon For mobile
Up arrow icon