Edit this page

Create Tooltips for Grid Elements

In AngularJS applications, you can create and show Kendo UI Tooltips for the elements of a Kendo UI Grid.

To achieve this behavior:

  1. Define a Kendo UI Tooltip widget around the Grid declaration.
  2. Together with the Grid settings, define the Tooltip settings in the $scope.
  3. Prepare a jQuery selector that will match the elements you want and set it to the filter property of the Tooltip.
  4. Define the content property so it returns the desired information—for example, based on the target element contents, the data-* attributes, or other logic.
Example
<div id="example" ng-app="KendoDemos">
    <div ng-controller="MyCtrl">

        <kendo-tooltip k-options="ttipOptions">

            <kendo-grid options="mainGridOptions">
            </kendo-grid>

        </kendo-tooltip>

    </div>
</div>

<script>
    angular.module("KendoDemos", ["kendo.directives"])
        .controller("MyCtrl", function ($scope) {

            $scope.ttipOptions = {
                filter: "th", //selector to match elements that will get a tooltip
                content: function (e) {
                    var target = e.target; // element for which the tooltip is shown
                    return "tooltip content for: " + $(target).text(); //generate content for the tooltips
                }
            };

            $scope.mainGridOptions = {
                dataSource: {
                    type: "odata",
                    transport: {
                            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
                        },
                    pageSize: 5,
                    serverPaging: true,
                    serverSorting: true
                },
                sortable: true,
                pageable: true,
                columns: [{
                            field: "FirstName",
                            title: "First Name",
                            width: "120px"
                        }, {
                            field: "LastName",
                            title: "Last Name",
                            width: "120px"
                        }, {
                            field: "Country",
                            width: "120px"
                        }, {
                            field: "City",
                            width: "120px"
                        }, {
                            field: "Title"
                        }
                ]
            };
        })
</script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy