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

Tooltip.animation.close

configuration

The animation played when the tooltip is closed.

tooltip.animation.close

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

Number

The duration of the close 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: {
                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.close.effects

String

The effect(s) to use when playing the close 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: {
                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>