MVC Map Widget Show Tooltips on Load

4 posts, 0 answers
  1. Dimitris
    Dimitris avatar
    2 posts
    Member since:
    May 2012

    Posted 31 May Link to this post

    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
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 04 Jun Link to this post

    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.
  3. Dimitris
    Dimitris avatar
    2 posts
    Member since:
    May 2012

    Posted 04 Jun in reply to Tsvetina Link to this post

    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
  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 06 Jun Link to this post

    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.
Back to Top