layerDefaults.marker.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({
        layerDefaults: {
            marker: {
                tooltip: {
                    content: function(e) {
                        var marker = e.sender.marker;
                        return marker.options.location.toString();
                    }
                }
            }
        },
        layers: [{
            type: "marker",

            locationField: "latlng",
            dataSource: {
                data: [{
                    latlng: [0, 0]
                }]
            }
        }]
    });
</script>

Example - content as static text

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layerDefaults: {
            marker: {
                tooltip: {
                    content: "Foo"
                }
            }
        },
        layers: [{
            type: "marker",

            locationField: "latlng",
            dataSource: {
                data: [{
                    latlng: [0, 0]
                }]
            }
        }]
    });
</script>

layerDefaults.marker.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({
        layerDefaults: {
            marker: {
                tooltip: {
                      content: {
                        url: "https://demos.telerik.com/kendo-ui/content/web/tooltip/ajax/ajaxContent3.html"
                      },
                      width: 220,
                      height: 280
                }
            }
        },
        layers: [{
            type: "marker",

            locationField: "latlng",
            dataSource: {
                data: [{
                    latlng: [0, 0]
                }]
            }
        }]
    });
</script>