Just a code snippet, that shows a tooltip, when the user clicks on a button:

 

image

 

<!DOCTYPE html>
<html>
<head>
    <title>RLI research page.</title>
    <link rel="stylesheet" type="text/css" href="../../../Libraries/Kendo/styles/kendo.common.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../Libraries/Kendo/styles/kendo.rtl.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../Libraries/Kendo/styles/kendo.metro.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../Libraries/FontAwesome/css/font-awesome.min.css" />
    <style type="text/css">
        #toonTooltip_tt_active {
            background-color: #FFFFFF;
            left: 14px;
        }
    </style>
</head>
<body>
    <div id="page">
        <h3 class="page-header">RLI research page.</h3>
        <div class="content">
            <div style="position:absolute;top:100px;"><button id="toonTooltip" class="button">...</button></div>
        </div>

        <script type="text/x-kendo-template" id="template">
            <div>
                <button class="button" style="margin-top: 4px; margin-bottom: 4px; width: 200px;">Exporteer to .csv&nbsp;<i class="fa fa-file-text-o" title="Exporteer to *.csv."></i></button>
            </div>
            <div>
                <button class="button" style="margin-bottom: 4px; width: 200px;">Exporteer naar .kml&nbsp;<i class="fa fa-file-text-o" title="Exporteer to *.kml."></i></button>
            </div>
            <div>
                <button class="button" style="margin-bottom: 4px; width: 200px;">Show route&nbsp;<i class="fa fa-road" title="Show route."></i></button>
            </div>
            <div>
                <button class="button" style="margin-bottom: 4px; width: 200px;">Delete route&nbsp;<i class="fa fa-minus-square" title="Delete route."></i></button>
            </div>
        </script>
    </div>
    <script type="text/javascript" src="../../../Libraries/jQuery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../../Libraries/Kendo/js/kendo.web.min.js"></script>
    <script type="text/javascript" src="../../../Libraries/Kendo/js/cultures/kendo.culture.nl-NL.min.js"></script>
    <script type="text/javascript" src="Rli.js"></script>
</body>
</html>

 

Rli.js

var app = (function ()
{
    var self = this;
    
    // The "main" entry point for this application.
    self.start = function ()
    {
        $("#toonTooltip").kendoTooltip({
            autoHide: false,
            content: kendo.template($("#template").html()),
            position: "right",
            showOn: "click"
        });
    };

        
    return self;
})();

// Start the application.
app.start();

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.