Click here to Skip to main content
15,608,936 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
I need my UI grid to show a customized tool tip. By customized i mean, it should show a custom HTML as a tooltip on hovering any cell

Below is my part of code

$scope.gridOptions1 = {
       enableSorting: true,
       enableFiltering: true,
       enableHighlighting: true,
      enableColumnResizing: true,
      filterOptions: $scope.filterOptions,
       onRegisterApi: function (gridApi) {
          $scope.grid1Api = gridApi;
      columnDefs: [
           field: 'Name', cellClass: 'cell', minWidth: 170, headerCellClass: 'header', cellTooltip:
       function (row, col) {
           return 'Name: ' + row.entity.Name + 'Desc: ' + row.entity.Description;

The above code helps me to show the Name and Description column values as a tooltip on a particular cell. I want to give the tooltip certain style, something like a tabular structure.
Updated 11-Apr-15 1:17am

1 solution

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900