Tooltip not clickable

[Stefano]

Hello, I'm using version 29.2.4 and I've the same problem reported on thread ' Tooltip only clickable in specific parts of balloon '.

I made a TooltipTemplate with an anchor to navigate in an external page, when i click the marker tooltip disappears and makes the hyperlink interaction impossible in the maps. 

How do I use a hyperlink inside a marker tooltip?

<SfMaps Background="transparent" Height="60vh" Width="100%" TooltipDisplayMode="TooltipGesture.Click">
    <MapsAreaSettings Background="transparent"/>
    <MapsZoomSettings Enable="true"
                      ShouldZoomInitially="true"
                      MouseWheelZoom="false"
                      MaxZoom="19"
                      MinZoom="14">
        <MapsZoomToolbarSettings>
            <MapsZoomToolbarButton ToolbarItems="@_toolbarItems"/>
        </MapsZoomToolbarSettings>
    </MapsZoomSettings>
    <MapsLayers>
        <MapsLayer UrlTemplate="@_urlTemplate" TValue="string">
            <MapsMarkerSettings>
                <MapsMarker Visible="true"
                            Shape="MarkerType.Circle"
                            Fill="red"
                            Width="24"
                            DataSource="Locations"
                            TValue="MapPosition">
                    <MapsMarkerBorder Width="2" Color="#ff9999"></MapsMarkerBorder>
                    <MapsMarkerTooltipSettings Visible="true">
                        <TooltipTemplate>
                            <div class="tooltip flex flex-col gap-0.5 px-3 py-1.5">
                                <span class="text-lg font-heading font-semibold whitespace-nowrap text-red-600">@(((MapPosition)context).Contact?.Name)</span>
                                <span class="border text-base border-s-0 border-e-0 border-t border-b-0 pt-1 text-white whitespace-nowrap">@(((MapPosition)context).Contact?.Address)</span>
                                @if (((MapPosition)context).Contact?.Email is not null)
                                {
                                    <span class="flex text-base items-center whitespace-nowrap text-white">
                                        <i class="fa-solid fa-envelope text-primary-light me-1.5 text-sm text-white"></i>
                                        @(((MapPosition)context).Contact?.Email)
                                    </span>
                                }
                                @if (((MapPosition)context).Contact?.Phone is not null)
                                {
                                    <span class="flex text-base items-center whitespace-nowrap text-white">
                                        <i class="fa-solid fa-phone text-primary-light me-1.5 text-sm text-white"></i>
                                        @(((MapPosition)context).Contact?.Phone)
                                    </span>
                                }
                                @if (((MapPosition)context).Contact?.Url is not null)
                                {
                                    <span class="flex text-base items-center whitespace-nowrap cursor-pointer text-white" @onclick="@OpenUrl">
                                        <i class="fa-solid fa-location-dot text-primary-light me-1.5 text-sm text-white"></i>
                                        <a rel='nofollow' href="@(((MapPosition)context).Contact?.Url)" target="_blank">Apri in Google Maps</a>
                                    </span>
                                }
                            </div>
                        </TooltipTemplate>
                    </MapsMarkerTooltipSettings>
                </MapsMarker>
            </MapsMarkerSettings>
        </MapsLayer>
    </MapsLayers>
    <MapsCenterPosition Latitude="MapCenterPosition.Latitude" Longitude="MapCenterPosition.Longitude"/>
</SfMaps>

[Durga Gopalakrishnan]

Hi Stefano,

Greetings from Syncfusion.

We recommend setting pointer-events to auto for the tooltip template that includes a hyperlink. This will ensure that the anchor link functions correctly when clicked. For your reference, we’ve attached the updated sample.

<MapsMarkerTooltipSettings Visible="true">

    <TooltipTemplate>

        @{

            var Data = context as MapPosition;

            <div style="pointer-events:auto !important">

            <div>@Data.Contact?.Name</div>

            <div>@Data.Contact?.Address</div>

            <div>@Data.Contact?.Email</div>

            <div>@Data.Contact?.Phone</div>

            <a rel='nofollow' href="@Data.Contact?.Url" target="_blank">Open in Google Maps</a>

           </div>                           

        }

    </TooltipTemplate>

</MapsMarkerTooltipSettings>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/MapsTemplate.zip

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Stefano]

Hi  Durga Gopalakrishnan,

thanks, your suggestion solved the problem.

king regards,

Stefano

[Durga Gopalakrishnan]

Most welcome. Please get back to us if you need any further assistance. We are always happy in assisting you.