This is a migrated thread and some comments may be shown as answers.

MVC Map Widget Show Tooltips on Load

3 Answers 17 Views
Map
This is a migrated thread and some comments may be shown as answers.
Dimitris
Top achievements
Rank 1
Dimitris asked on 31 May 2019, 03:21 PM
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

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 04 Jun 2019, 09:23 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Dimitris
Top achievements
Rank 1
answered on 04 Jun 2019, 11:12 AM
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
0
Tsvetina
Telerik team
answered on 06 Jun 2019, 09:52 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Map
Asked by
Dimitris
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Dimitris
Top achievements
Rank 1
Share this question
or