New to Kendo UI for jQuery? Download free 30-day trial

Always Show Marker Tooltip


Product Progress® Kendo UI® Map for jQuery


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


  1. Loop the markers.
  2. After the Map initializes, in its events, call the .show() method of their tooltips.
<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 cannot dismiss them as they are more like labels. */

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

    div.k-tooltip div.k-tooltip-content {
        padding-right: 0;
In this article