Always Show Marker Tooltip


Product Map for ProgressĀ® Kendo UIĀ®


The map markers have tooltips the user can show by hovering with the mouse. In some cases, you may want them to show up automatically when the map loads.

To do this, you need to loop the markers, and call the .show() method of their tooltips. You can do this after the map initializes and in its events.


<div id="map"></div>

    function createMap() {
        var map = $("#map").kendoMap({
            center: [30.268107, -97.744821],
            zoom: 3,
            layers: [{
                type: "tile",
                urlTemplate: "http://#= subdomain zoom #/#= x #/#= y #.png",
                subdomains: ["a", "b", "c"],
                attribution: "&copy; <a href=''>OpenStreetMap contributors</a>"
            markerDefaults: { //make tooltips "sticky" by default
                tooltip: {
                    autoHide: false
            markers: [{
                location: [30.268107, -97.744821],
                shape: "pinTarget",
                tooltip: {
                    content: "Austin, TX"
            }, {
                location: [40.7128, -74.0060],
                shape: "pinTarget",
                tooltip: {
                    content: "New York, NY"
            zoomEnd: function (e) { //when the user zooms or pans, re-show the tooltips
            panEnd: function (e) {
        return map;

    $(document).ready(function () {
        var map = createMap();
        showTooltips(map); //show the tooltips initially

    function showTooltips(map) {
        setTimeout(function () {
            var extent = map.extent(); //we use this to only show tooltips for markers that are visible
            for (var i = 0; i < map.markers.items.length; i++) {
                if (extent.contains(map.markers.items[i].options.location)) {
                    map.markers.items[i];//show the tooltips
        }, 500); //kinetic scrolling and loading new content can cause concurrency issues if no timeout is present. You can test smaller values if you like, though

    /* remove the manual close button from the tooltips so the user can't dismiss them and the are more like labels */

    div.k-tooltip-button {
        display: none;

    div.k-tooltip div.k-tooltip-content {
        padding-right: 0;
In this article
Not finding the help you need? Improve this article