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

[Andrew Tarr]

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? 

[Srihari Muthukaruppan]

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

[Srihari Muthukaruppan]

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.

Sample: https://stackblitz.com/edit/angular-2zz96k-r4m1u4?file=app.component.html

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

[Andrew Tarr]

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.

[Srihari Muthukaruppan]

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. 

  

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

  

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 

[Andrew Tarr]

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.

[Srihari Muthukaruppan]

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. 

  

Feedback Portal: https://www.syncfusion.com/feedback/14632 

  

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 

[Srihari Muthukaruppan]

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 

[Srihari Muthukaruppan]

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. 

  

Npm Packages: https://www.npmjs.com/~syncfusionorg 

  

Feedback Portal: https://www.syncfusion.com/feedback/14632  

  

We appreciate your patience in waiting for this release. Let me know if you need further assistance. 

 

Regards,  

Srihari M 

[Andrew Tarr]

Thanks!

[Srihari Muthukaruppan]

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