1. Home
  2. Forum
  3. Blazor
  4. How to use tooltip template on the maps marker

How to use tooltip template on the maps marker

I tried using the "edit" feature but it freezes up every time.
I'll add that the version is latest 19.2.0.47


7 Replies
SO Sorin July 14, 2021 02:15 AM UTC

Hello,

I'm trying to utilize the TooltipTemplate of MapsMarkerTooltipSettings (link) but I'm struggling to make it work.

For example, I tried putting it in both under the MapsLayer and under the main component directly, but both cases result in errors in the console. I attached my code for reference. Version is latest 19.2.0.47





Could anyone provide an example? I can't find any such MapMarkerTooltip under the demos.

Thank you


Attachment: MapComponent__Copy_a7bcae94.zip


SA Sabari Anand Senthamarai Kannan Syncfusion Team July 14, 2021 05:08 PM UTC

Hi Sorin, 

We are able to reproduce the reported scenario with the latest version (v19.2.47) and we have considered it 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 end of July, 2021. Please find the below feedback link to keep track of the reported issue. 


Regards, 
Sabari Anand 


IR Indumathi Ravi Syncfusion Team August 4, 2021 02:50 PM UTC

Hi Sorin, 
  
Thank you for your patience. 
  
We have fixed the reported issue "Tooltip template is not displayed over the marker template" and included the fix in our weekly patch release(v19.2.51). Please update the "Syncfusion.Blazor.Maps" package in your application to resolve the reported issue. Please find the link of the package below. 
  
  
When we analyzed the provided code snippet, we came to know that the razor tags for the template is not initialized properly in your application. Please find the proper syntax for initializing the TooltipTemplate in the MapsMarkerTooltipSettings class below. 
  
Code Snippet: 
<MapsLayers> 
    <MapsLayer> 
        <MapsMarkerSettings> 
            <MapsMarker> 
                <MarkerTemplate> 
                    // Marker template code 
                </MarkerTemplate> 
                <ChildContent> 
                    <MapsMarkerTooltipSettings Visible="true"> 
                        <TooltipTemplate> 
                            <h1>Test</h1> 
                        </TooltipTemplate> 
                    </MapsMarkerTooltipSettings> 
                </ChildContent> 
            <MapsMarker> 
        </MapsMarkerSettings> 
    <MapsLayer> 
</MapsLayers> 
  
We have created a simple sample to demonstrate the same and it can be downloaded from the below link. 
 
  
Please let us know if you need any further assistance. 
  
Regards, 
Indumathi R 


SO Sorin August 10, 2021 11:40 AM UTC

      

Hello Indumathi,


Thank you very much for your detailed reply, I could confirm the tooltip template is working now!


I have one follow up question. I noticed that the tooltip follows the mouse around.

For my application I had in mind a tooltip that would be stationary in order to make it clickable.

For example, I achieved this using chart tooltip:



Or another example of stationary tooltip is from Syncfusion's chart demo:

https://blazor.syncfusion.com/demos/chart/tooltip-template?theme=bootstrap4 




Would you happen to have any suggestions on how to make the tooltip stationary?


Thank you!


IR Indumathi Ravi Syncfusion Team August 11, 2021 12:53 PM UTC

Hi Sorin,

Thank you for your update.

When we tried to reproduce the reported scenario, the tooltip appeared and moved with the mouse. This is the default behavior of the Maps control.  
  
However, by changing the "TooltipDisplayMode" to "Click" in the Maps, the tooltip will appear when you click on a specific text in the marker template. Please find the code snippet to customize the tooltip in the Maps control below. 

Code Snippet: 
<SfMaps TooltipDisplayMode="TooltipGesture.Click">

//..

</SfMaps> 
  
We have created a sample application from the below link to demonstrate the same. 
  
Please let us know if you need any further assistance.  

Regards,
Indumathi R. 


SO Sorin August 15, 2021 02:49 PM UTC

Hello Indumathi,


Thank you for your reply! I understand that this is the default behavior of the Maps control.
I'm going to try to achieve my objective using the Maps Annotation instead of Tooltip.


Thanks,
Sorin


IR Indumathi Ravi Syncfusion Team August 16, 2021 02:43 PM UTC

Hi Sorin,

Thank you for your update.

We tried to achieve your scenario of rendering the annotation from top of the marker template using the "MarkerClick" event. The "x" and "y" positions of the annotation may be found using the arguments of the "MarkerClick" event. This decided value must be bound to the "x" and "y" properties of the "MapsAnnotation" class. To make the annotation visible or invisible, we used the boolean variable "isAnnotation." The "isAnnotation" boolean has been set to "true" in the "MarkerClick" event and to "false" in the "MarkerLeave" event. Please find the below code snippet.

Code Snippet: 
<SfMaps> 
    <MapsEvents OnMarkerClick="MarkerClick" OnMarkerMouseLeave="MarkerLeave"> </MapsEvents> 
        <MapsAnnotations> 
            @if (isAnnotation) 
            { 
                <MapsAnnotation X="@x" Y="@y" ZIndex="3"> 
                    <ContentTemplate><div>AnnotationValue</div></ContentTemplate> 
                </MapsAnnotation> 
            } 
        </MapsAnnotations>
</SfMpas>    
@code{
    public bool isAnnotation;
    public double markerWidth = 50;
    public double markerHeight = 50;
    void MarkerClick(MarkerMoveEventArgs args) 
    { 
        isAnnotation = true; 
        x = (args.X - markerWidth).ToString(); 
        y = (args.Y - markerHeight).ToString(); 
        this.StateHasChanged(); 
    } 
    void MarkerLeave(MarkerMouseLeaveEventArgs args) 
    { 
        isAnnotation = false; 
    }
} 
  
We have created a simple sample to demonstrate the same and it can be downloaded from the below link. 
Please let us know if you need any further assistance. 

Regards,
Indumathi R. 


Loader.
Up arrow icon