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

Tooltip.animation.open

configuration

The animation played when the tooltip is opened.

tooltip.animation.open

Object

<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.duration

Number

The duration of the open animation in milliseconds.

<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>

tooltip.animation.open.effects

String

The effect(s) to use when playing the open animation. Multiple effects should be separated with a space.

Complete list of available animations

<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>