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

MarkerDefaults.tooltip

configuration

Default Kendo UI Tooltip options for this marker.

markerDefaults.tooltip

Object

<div id="map"></div>
<script>
    $("#map").kendoMap({
        markerDefaults: {
            tooltip: {
                autoHide: false,
                template: (data) => `<strong>${data.title || 'Marker'}</strong><br/>Location: ${data.location}`,
                position: "bottom",
                showOn: "click"
            }
        },
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }]
    });
</script>

markerDefaults.tooltip.animation

Object

A collection of {Animation} objects, used to change default animations. A value of false will disable all animations in the widget.

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

markerDefaults.tooltip.autoHide

Boolean

Specifies if the tooltip will be hidden when mouse leaves the target element. If set to false a close button will be shown within tooltip. If set to false, showAfter is specified and the showOn is set to "mouseenter" the Tooltip will be displayed after the given timeout even if the element is no longer hovered.

Default: true

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

markerDefaults.tooltip.callout

Boolean

Specifies if the tooltip callout will be displayed.

Default: true

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

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.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://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>

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://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.height

Number

The height (in pixels) of the tooltip.

Default: Infinity

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

markerDefaults.tooltip.iframe

Boolean

Explicitly states whether content iframe should be created.

<div id="map"></div>
<script>
    $("#map").kendoMap({
        layers: [{
            type: "tile",
            urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
            attribution: "&copy; OpenStreetMap"
        }],
        markerDefaults: {
            tooltip: {
                  iframe: true,
                  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>

markerDefaults.tooltip.position

String

The position relative to the target element, at which the tooltip will be shown. Predefined values are "bottom", "top", "left", "right", "center".

Default: "top"

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

markerDefaults.tooltip.showAfter

Number

Specify the delay in milliseconds before the tooltip is shown. This option is ignored if showOn is set to "click" or "focus".

Default: 100

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

markerDefaults.tooltip.showOn

String

The event on which the tooltip will be shown. Predefined values are "mouseenter", "click" and "focus".

Default: "mouseenter"

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

markerDefaults.tooltip.template

String|Template

The template which renders the tooltip content.

The fields which can be used in the template are:

location - the marker location (kendo.dataviz.map.Location instance)
marker - the marker instance

Setting a template disables the content option.

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

markerDefaults.tooltip.width

Number

The width (in pixels) of the tooltip.

Default: Infinity

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

Related Members