tooltip.animation Object

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

Example - configuring Marker animations

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

tooltip.animation.close Object

The animation that will be used when a Tooltip closes.

Example

<div id="map"></div>
<script>
  $("#map").kendoMap({
    layers: [{
      type: "tile",
      urlTemplate: "http://a.tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png",
      attribution: "&copy; OpenStreetMap"
    }],
    markers: [
      {
        location: [42, 27],
        tooltip: {
          content: 'Map tooltip',
          animation: {                
            close: {
              effects: "fade:out",
              duration: 1000
            }
          }
        }
      }
    ]
  });
</script>

tooltip.animation.close.effects String

Effect to be used for closing of the tooltip.

Example

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

tooltip.animation.close.duration Number

Defines the animation duration.

Example

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

tooltip.animation.open Object

The animation that will be used when a Tooltip opens.

Example

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

tooltip.animation.open.effects String

Effect to be used for opening of the Tooltip.

Example

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

tooltip.animation.open.duration Number

Defines the animation duration.

Example

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