MVC Map Widget Show Tooltips on Load

[Dimitris]

Hello,

I have constructed a simple map as per following demo: https://demos.telerik.com/aspnet-mvc/map and I need the tooltip assigned to the marker to be displayed automatically upon page load. I have come across this solution: https://www.telerik.com/forums/marker-tooltip-show-on-load but it references AJAX, not Kendo-MVC. Can you please help me on how to achieve this?

Thank you,
Dimitris

[Tsvetina]

Hello Dimitris,

It is possible to access the marker tooltip in the MarkerActivate event and, using a timeout, to explicitly show the tooltip. 

.Events(e=>e.MarkerActivate("onMarkerActivated"))

<script>
    function onMarkerActivated(e) {
        setTimeout(function () {
            e.marker.tooltip.show();
        }, 1000);
    }
</script>

Unfortunately, I could not find a solution that does not involve a setTimeout call, as there are no events firing after this one without user interaction with the Map, so I hope this one works for you.

Regards,
Tsvetina
Progress Telerik

[Dimitris]

Hello Tsvetina,

Thank you for your email. The tooltips will show if I follow your recommendation but will disappear as soon as the map loses focus. I have tried this setting: .Tooltip(tooltip => tooltip.AutoHide(false) but still the tooltips will disappear when focus is lost. Is there a way to make them always “show” even if focus is lost?

Thank you for your assistance.
Regards,
Dimitris

[Tsvetina]

Hi Dimitrios,

I can't suggest a way to keep the tooltips visible even when the map does not have focus. If you want to have content that is always visible, it would be better to add absolutely positioned spans on top of the Map containing the needed information. Here is an example:

<script>
    function onMarkerActivated(e) {
        var element = e.marker.element;
        var span = $("<span class='custom-tooltip' style='top: "
            + (element.offset().top - 30)
            + "px; left: "
            + (element.offset().left + 20)
            + "px'>some text</span>").appendTo($("#tooltips"));
    }
</script>
<style>
    .custom-tooltip {
        position: absolute;
        z-index: 1002;
        padding: 5px 10px;
        background: #fff;
        opacity: 0.5;
        border: 1px solid #000;
        border-radius: 15px;
    }
</style>
@(Html.Kendo().Map()
    .Name("map")
    .Center(30.268107, -97.744821)
    .Zoom(3)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Tile)
            .UrlTemplate("http://#= subdomain #.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png")
            .Subdomains("a", "b", "c")
            .Attribution("© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>");
    })
    .Markers(markers =>
    {
        markers.Add()
            .Location(30.268107, -97.744821)
            .Shape(MapMarkersShape.PinTarget);
        markers.Add()
            .Location(35.268107, -78.744821)
            .Shape(MapMarkersShape.PinTarget);
    })
    .Events(e=>e.MarkerActivate("onMarkerActivated"))
)
<div id="tooltips"></div>

The result looks like the attached image.

Regards,
Tsvetina
Progress Telerik