tooltip.animationBoolean|Object
Configures the opening and closing animations of the tooltip. Setting the animation option to false will disable the opening and closing animations. As a result the tooltip will open and close instantly.
animation:true is not a valid configuration.
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
open: { effects: "fadeIn", duration: 300 },
close: { effects: "fadeOut", duration: 150 }
}
}
});
var rect = new draw.Rect(new geom.Rect([50, 50], [100, 80]), {
tooltip: {
content: "Animated Tooltip Rectangle"
}
}).fill("teal");
surface.draw(rect);
</script>tooltip.animation.closeObject
The animation played when the tooltip is closed.
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
close: {
effects: "slideUp fadeOut",
duration: 250
}
}
}
});
var circle = new draw.Circle(new geom.Circle([200, 150], 50), {
tooltip: {
content: "Circle with Close Animation"
}
}).fill("red");
surface.draw(circle);
</script>tooltip.animation.close.effectsString
The effect(s) to use when playing the close animation. Multiple effects should be separated with a space.
Complete list of available animations
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
close: {
effects: "zoomOut fadeOut",
duration: 200
}
}
}
});
var path = new draw.Path({
tooltip: {
content: "Path with Zoom-Out Close Effect"
}
}).fill("navy")
.moveTo(100, 50).lineTo(150, 100).lineTo(50, 100).close();
surface.draw(path);
</script>tooltip.animation.close.durationNumber
The duration of the close animation in milliseconds.
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
close: {
effects: "fadeOut",
duration: 1000 // 1 second close duration
}
}
}
});
var rect = new draw.Rect(new geom.Rect([80, 60], [120, 80]), {
tooltip: {
content: "Slow Fade Out Tooltip"
}
}).fill("maroon");
surface.draw(rect);
</script>tooltip.animation.openObject
The animation played when the tooltip is opened.
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
open: {
effects: "slideDown fadeIn",
duration: 400
}
}
}
});
var circle = new draw.Circle(new geom.Circle([200, 150], 60), {
tooltip: {
content: "Circle with Open Animation"
}
}).fill("darkgreen");
surface.draw(circle);
</script>tooltip.animation.open.effectsString
The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.
Complete list of available animations
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
open: {
effects: "zoomIn bounceIn",
duration: 350
}
}
}
});
var path = new draw.Path({
tooltip: {
content: "Path with Zoom-In Bounce Effect"
}
}).fill("crimson")
.moveTo(120, 80).lineTo(180, 130).lineTo(60, 130).close();
surface.draw(path);
</script>tooltip.animation.open.durationNumber
The duration of the open animation in milliseconds.
Example
<div id="container"></div>
<script>
var draw = kendo.drawing;
var geom = kendo.geometry;
var surface = draw.Surface.create($("#container"), {
width: "400px",
height: "300px",
tooltip: {
animation: {
open: {
effects: "fadeIn",
duration: 800 // 0.8 second open duration
}
}
}
});
var rect = new draw.Rect(new geom.Rect([100, 100], [150, 100]), {
tooltip: {
content: "Slow Fade In Tooltip"
}
}).fill("indigo");
surface.draw(rect);
</script>In this article