tooltip - API Reference - Kendo UI Marker

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

configuration

Kendo UI Tooltip options for this marker.

Object

<div id="map"></div>
<script>
$("#map").kendoMap({
    layers: [{
        type: "tile",
        urlTemplate: "https://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
        attribution: "&copy; OpenStreetMap"
    }],
    markers: [{
        location: [42.3601, 71.0589],
        tooltip: {
            content: "Boston, Massachusetts",
            position: "top",
            showAfter: 200
        }
    }]
});
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          animation: {
            open: {
              effects: "fade:in",
              duration: 1000
            },
            close: {
              effects: "fade:out",
              duration: 1000
            }
          }
        }
      }
    ]
  });
</script>

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"
    }],
    markers: [{
        location: [42.3601, 71.0589],
        tooltip: {
            content: "This tooltip won't auto-hide",
            autoHide: false
        }
    }]
});
</script>

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"
    }],
    markers: [{
        location: [42.3601, 71.0589],
        tooltip: {
            content: "Tooltip without callout",
            callout: false
        }
    }]
});
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip'              
        }
      }
    ]
  });
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          height: 200
        }
      }
    ]
  });
</script>

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"
    }],
    markers: [{
        location: [42.3601, 71.0589],
        tooltip: {
            content: {
                url: "https://example.com/marker-info"
            },
            iframe: true,
            width: 400,
            height: 300
        }
    }]
});
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          position: "right"
        }
      }
    ]
  });
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          showAfter: 500
        }
      }
    ]
  });
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          showOn: 'click'
        }
      }
    ]
  });
</script>

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"
    }],
    markers: [{
        location: [42.3601, 71.0589],
        title: "Boston",
        tooltip: {
            template: (data) => `
                <div>
                    <strong>Location:</strong> ${data.marker.title}<br>
                    <strong>Coordinates:</strong> ${data.location.lat}, ${data.location.lng}
                </div>
            `
        }
    }]
});
</script>

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"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          width: 200
        }
      }
    ]
  });
</script>

Related Members