markerDefaults.tooltip.content Object|String|Function

The text or a function which result will be shown within the tooltip. By default the tooltip will display the target element title attribute content.

Example - extract the content from target marker

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markerDefaults: {
            tooltip: {
                content: function(e) {
                    var marker = e.sender.marker;
                    return marker.options.location.toString();
                }
            }
        },
        markers: [{
            location: [42, 27]
        }, {
            location: [40, 20]
        }]
    });
</script>

Example - content as static text

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markerDefaults: {
            tooltip: {
                content: "Foo"
            }
        },
        markers: [{
            location: [42, 27]
        }, {
            location: [40, 20]
        }]
    });
</script>

markerDefaults.tooltip.content.url String

Specifies a URL or request options that the tooltip should load its content from.

Note: For URLs starting with a protocol (e.g. http://), a container iframe element is automatically created. This behavior may change in future versions, so it is advisable to always use the iframe configuration option.

Example - load content from remote URL

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markerDefaults: {
            tooltip: {
                  content: {
                    url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
                  },
                  width: 220,
                  height: 280
            }
        },
        markers: [{
            location: [42, 27]
        }, {
            location: [40, 20]
        }]
    });
</script>