tooltip

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

configuration

Specifies general options for the shapes tooltip.

Object

<div id="container"></div>
<script>
    var draw = kendo.drawing;
    var surface = draw.Surface.create($("#container"), {
        width: "400px",
        height: "300px",
        tooltip: {
            appendTo: "body",
            animation: {
                open: { duration: 200 },
                close: { duration: 100 }
            }
        }
    });

    var path = new draw.Path({
        tooltip: {
            content: "Interactive Path Element"
        }
    }).fill("purple")
    .moveTo(50, 0).lineTo(100, 50).lineTo(0, 50).close();

    surface.draw(path);
</script>

tooltip.animation

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

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

String|jQuery

Which element the tooltip will be appended to.

Default: document.body

<div id="container"></div>
<div id="tooltip-container"></div>
<script>
    var draw = kendo.drawing;
    var geom = kendo.geometry;
    var surface = draw.Surface.create($("#container"), {
        width: "400px",
        height: "300px",
        tooltip: {
            appendTo: "#tooltip-container"
        }
    });

    var circle = new draw.Circle(new geom.Circle([200, 150], 50), {
        tooltip: {
            content: "Tooltip appended to custom container"
        }
    }).fill("gold");

    surface.draw(circle);
</script>

tooltip

tooltip.animation

tooltip.appendTo

Related Members