Just a code snippet, that shows a tooltip, when the user clicks on a button:
<!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 <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 <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 <i class="fa fa-road" title="Show route."></i></button> </div> <div> <button class="button" style="margin-bottom: 4px; width: 200px;">Delete route <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();