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

How to add close delay to Map Marker Tooltip

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


7 Replies

IL Indhumathy Loganathan Syncfusion Team April 7, 2023 01:34 PM UTC

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



YP Yogesh Patil April 17, 2023 11:58 AM UTC

Hello Team,


mapView (1) (1) (1).png

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



IR Indumathi Ravi Syncfusion Team April 18, 2023 01:43 PM UTC

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.



YP Yogesh Patil April 20, 2023 11:31 AM UTC

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.


I have  to call function on tooltip button click.



Thanks & Regards,

Yogesh



IR Indumathi Ravi Syncfusion Team April 20, 2023 08:28 PM UTC

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.



IR Indumathi Ravi Syncfusion Team April 24, 2023 06:39 AM UTC

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.


https://www.syncfusion.com/feedback/43103



IR Indumathi Ravi Syncfusion Team May 9, 2023 05:33 PM UTC

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.


Loader.
Up arrow icon