Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>KendoUI Test Page</title>
    
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.mobile.all.min.css" rel="stylesheet" />
​
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
    <style>
        #list li {
            border: 1px solid red;
            margin: 5px;
            padding: 10px;
            width: 30%;
        }
    </style>
</head>
<body>
    <ul id="list" data-bind="source: people" data-template="tmp"></ul>
    <script id="tmp" type="text/x-kendo-template">
        <li data-uid="#: uid #">
            #: name #
        </li>
    </script>
​
    <script id="tooltip-tmp" type="text/x-kendo-template">
        <p>#: name #</p>
        <ul>
            <li>LogIn</li>
            <li>Register</li>
            <li>Logout</li>
        </ul>
    </script>
​
    <script>
        var viewModel = kendo.observable({
            people: [{name: "Alex"}, {name: "Steve"}]
        });
        kendo.bind($(document.body), viewModel);
        $("#list").kendoTooltip({
            filter: "li",
            content: function(e) {
                var uid = e.target.data("uid"),
                    template = kendo.template($("#tooltip-tmp").html()),
                    model; 
​
                model = viewModel.people.find(function(item, index) {
                    if(item.uid === uid) {
                        return item;
                    }
                });
​
                return template(model);
            },
            width: 200,
            height: 200,
            autoHide: false,
            showOn: "click"
        });
    </script>
</body>
</html>
​
 
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers