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

Tooltip.animation

configuration

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.

tooltip.animation

Boolean|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: "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.close

Object

The animation played when the tooltip is closed.

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

Object

The animation played when the tooltip is opened.

<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

tooltip.animation

tooltip.animation.close

tooltip.animation.open

Related Members