Hello Syncfusion,
I am using custom tooltip for Map Marker. I have added button on tooltip. But tooltip is gone very less time span, so I am not able to click on button. Is there any way to give close delay to Tooltip or close button to close instead.
Thanks,
Yogesh
Hi Yogesh,
From the shared details, we were not sure whether you were using the Syncfusion Tooltip component or your own custom Tooltip. Also, we don't know on which platform you are using the Tooltip component. Share with us proper details or code snippets to further validate and provide a prompt solution.
Regards,
Indhumathy L
Hello Team,
I have added these two buttons on marker tooltip. Tooltip is open on mouse hover on marker. But here I, am not able to click on these buttons to perform any action. So is there any way to open marker tooltip on mouse click, so I can able to click on tooltip buttons.
Thanks,
Yogesh Patil
Hi Yogesh,
To achieve your scenario, you can set the "tooltipDisplayMode" property to "Click" to make the tooltip to appear only when we click on the marker. Now, you can add two buttons in the tooltip template which can perform the defined actions when clicked on them. Please find the code snippet for the same below.
Code Snippet:
<MapsComponent id="maps" tooltipDisplayMode="Click"> <LayersDirective> <LayerDirective> <MarkersDirective> <MarkerDirective tooltipSettings={{ template: "<div style='width:212px' class='toolback'><div class='listing1'><center>${vehiclenumber}</center></div> <hr style='margin-top: 2px;margin-bottom:5px;border:0.5px solid #DDDDDD'><div> <span class='listing1'>Unit ID : </span><span class='listing2'>${name}</span></div><div> <span class='listing1'>Desc : </span><span class='listing2'>${desc}</span></div><button> <a rel='nofollow' href=${rel='nofollow' href}>COMMON DASH</a></button> <button> <a rel='nofollow' href=${rel='nofollow' href}>ASSET DASH</a> </button></div>", }} ></MarkerDirective> </MarkersDirective> </LayerDirective> </LayersDirective> </MapsComponent> |
You can find the sample to demonstrate the same from the below link.
Sample: https://stackblitz.com/edit/react-25xy8e-fhj9wc
Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/tooltip946691832
We referred to the previous forums under your
name to confirm React is the platform for your requirements. Please confirm the
platform for your requirements and let us know if you need any further
assistance.
Hello Syncfusion,
Thanks for the reply,
The above solution is working fine. But instead of anchor () tag, is it possible to use onClick() event on button to perform actions.
Hi Yogesh,
We are currently validating the reported scenario in the Maps component.
However, we will
analyze this and update you with further details on April 24, 2023.
Hi Yogesh,
When we checked the button click event in the tooltip template of the Maps component, it is not working as expected. So, we have considered this as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our weekly patch release which is expected to be available by the second week of May 2023. Please find the feedback link below to keep track of the reported issue.
Hi Yogesh,
We have fixed the reported issue - "Click event is not triggered for the button in the tooltip template in Maps component” and the fix is included in our weekly patch release (v21.2.4). Please update the “ej2-maps” and “ej2-react-maps” packages to the latest version in your application to resolve the reported issue. Please find the package links below.
https://www.npmjs.com/package/@syncfusion/ej2-maps
https://www.npmjs.com/package/@syncfusion/ej2-react-maps
Meanwhile, we can achieve your scenario by adding any HTML element such as button in the tooltip template. When the button inside the tooltip is clicked, we can trigger the method now. We have created a sample to demonstrate the same and it can be found from the below link.
https://stackblitz.com/edit/react-25xy8e-rdl6x8
Please let us know if you need any further
assistance.