jube-fork/Jube.App/wwwroot/kendo/examples/drawing/tooltip.html

<!DOCTYPE html>
<html>
<head>
    <title>Tooltip</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="box wide">
        <div id="info" class="box-col"></div>
        <div class="box-col select-col">
            <h4>Surface type</h4>
            <ul id="select-type">
                <li>SVG</li>
                <li>Canvas</li>
            </ul>
        </div>
    </div>
    <div id="surface-container">
        <div id="surface" style="width: 100%; height: 100%;"></div>
    </div>
    <script>
        var dataviz = kendo.dataviz;
        var geom = kendo.geometry;
        var Point = geom.Point;
        var draw = kendo.drawing;
        var Path = draw.Path;
        var Text = draw.Text;
        var Group = draw.Group;
        var Rect = draw.Rect;
        var Circle = draw.Circle;
        var Arc = draw.Arc;

        function initSurface(type) {
            return draw.Surface.create($("#surface"), { type: type });
        }

        function createElements() {
            var container = new Group();

            path = new Path({
                fill: {
                    color: "#E4141B"                    
                },
                tooltip: {
                    content: "Hi, I am a path"                    
                },
                transform: geom.transform().translate(-50, 150).rotate(-45)
            }).moveTo(50, 50)
            .lineTo(50, 150)
            .curveTo([60, 50],
                [100, 50],
                [130, 150])
            .lineTo(130, 50)
            .lineTo(50, 50);

            var group = new Group({
                tooltip: {
                    shared: true,
                    content: "Hi, I am a group",
                    autoHide: false,
                    position: "right"            
                },
                transform: geom.transform().translate(200, 100)
            });

            group.append(new Rect(new geom.Rect([0, 0], [100, 100]), {
                fill: {
                    color: "#E4141B"
                }
            }));

            group.append(new Circle(new geom.Circle([50, 50], 50), {
                fill: {
                    color: "blue"
                }
            }));

            group.append(new Text("Group Text", [20, 40], {
                fill: {
                    color: "#fff"
                }
            }));

            var circle = new Circle(new geom.Circle([460, 150], 50), {
                fill: {
                    color: "#E4141B"
                },
                tooltip: {
                    content: "Hi, I am a circle",
                    position: "bottom"                    
                }
            });

            var arc = new Arc(new geom.Arc([710, 150], { radiusX: 100, radiusY: 50, startAngle: 50, endAngle: 280 }), {
                fill: {
                    color: "#E4141B"                    
                },
                tooltip: {
                    content: "Hi, I am an arc",
                    position: "left" 
                }
            });

            var rect = new Rect(new geom.Rect([850, 100], [100, 100]), {
                fill: {
                    color: "#E4141B"
                },
                tooltip: {
                    content: "Hi, I am a rectangle",
                    position: "cursor",
                    offset: 10
                }
            })

            container.append(path, group, circle, arc, rect);

            return container;
        }

        $(document).ready(function () {
            var surface = initSurface();
            var group = createElements();
            surface.draw(group);

            $("#select-type li").each(function () {
                var type = $(this).text().toLowerCase();
                if (!kendo.support[type]) {
                    $(this).addClass("k-state-disabled");
                }
            });

            $("#select-type").kendoMobileButtonGroup({
                select: function (e) {
                    var option = $("li", e.sender.element).eq(e.index);
                    var type = option.text().toLowerCase();

                    surface.destroy();
                    surface = initSurface(type);
                    surface.draw(group);
                },
                index: $("#select-type li:not(.k-state-disabled)").index()
            });
        });
    </script>
    <style>
        #surface-container {
            text-align: center;
            margin: 0 auto;
            width: 100%;
            height: 600px;
        }
    </style>
</div>



    
</body>
</html>