Enh(col): fix #3118 provide for headerTooltip, provide for static string

Author: PaulL1

misc/tutorial/103_filtering.ngdoc

@@ -72,7 +72,7 @@ In this example we've provided a "toggle filters" button to allow you to turn th
 still visually indicate which columns are filtered even when the filters aren't present, we've used the headerCellClass
 to make any columns with a filter condition have blue text.
 
-## Single filter box (similar to 2.x)
+### Single filter box (similar to 2.x)
 
 Refer the {@link 499_FAQ FAQ}, it is possible to implement this using a rowsProcessor.
 

misc/tutorial/117_tooltips.ngdoc

@@ -5,14 +5,26 @@
 You can set a tooltip (actually, a title) to pop up when a user hovers over a cell.
 
 This tooltip can be simply the cell contents, in which case set the columnDef to have
-`cellTooltip: true`.  Or it can be a function that returns a value derived from the 
+`cellTooltip: true`.
+
+Or it can be a function that returns a value derived from the 
 current column and row - for example:
+
 ```
   cellTooltip: function(row, col) {
     return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company;
   }
 ```
 
+Or it can be a string, in which case that string will be displayed:
+
+```
+  cellTooltip: 'Custom tooltip - maybe some help text'
+```
+
+
+You can also set a headerTooltip in a similar manner, it defaults to showing the displayName.
+
 Note that turning on tooltips will create an extra watcher per cell, so it has an impact on overall grid
 performance, it is not recommended to turn them on for every column, rather only for the columns likely to have
 data that won't be displayable within the grid row (e.g. long description fields).
@@ -27,13 +39,16 @@ Tooltips respect the cellFilter, so if you define a cellFilter it will also be u
       $scope.gridOptions = {
         enableSorting: true,
         columnDefs: [
-          { field: 'name', cellTooltip: true },
+          { field: 'name', cellTooltip: 'Custom string', headerTooltip: 'Custom header string' },
           { field: 'company', cellTooltip: 
             function( row, col ) {
               return 'Name: ' + row.entity.name + ' Company: ' + row.entity.company;
-            } 
+            }, headerTooltip: 
+            function( col ) {
+              return 'Header: ' + col.displayName;
+            }
           },
-          { field: 'gender', cellTooltip: true, cellFilter: 'mapGender' },
+          { field: 'gender', cellTooltip: true, headerTooltip: true, cellFilter: 'mapGender' },
         ],
         onRegisterApi: function( gridApi ) {
           $scope.gridApi = gridApi;

src/js/core/factories/Grid.js

@@ -890,17 +890,6 @@ angular.module('ui.grid')
       var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col));
       html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
 
-      if (col.cellTooltip === false){
-        html = html.replace(uiGridConstants.TOOLTIP, '');
-      } else {
-        // gridColumn will have made sure that the col either has false or a function for this value
-        if (col.cellFilter){
-          html = html.replace(uiGridConstants.TOOLTIP, 'title="{{col.cellTooltip(row, col) | ' + col.cellFilter + '}}"');
-        } else {
-          html = html.replace(uiGridConstants.TOOLTIP, 'title="{{col.cellTooltip(row, col)}}"');
-        }
-      }
-
       var compiledElementFn = $compile(html);
       col.compiledElementFn = compiledElementFn;
 

src/js/core/factories/GridColumn.js

@@ -487,12 +487,13 @@ angular.module('ui.grid')
 
     /**
      * @ngdoc property
-     * @name tooltip
+     * @name cellTooltip
      * @propertyOf ui.grid.class:GridOptions.columnDef
      * @description Whether or not to show a tooltip when a user hovers over the cell.
      * If set to false, no tooltip.  If true, the cell value is shown in the tooltip (useful
      * if you have long values in your cells), if a function then that function is called
-     * passing in the row and the col `cellTooltip( row, col )`, and the return value is shown in the tooltip.
+     * passing in the row and the col `cellTooltip( row, col )`, and the return value is shown in the tooltip,
+     * if it is a static string then displays that static string.
      * 
      * Defaults to false
      *
@@ -503,10 +504,42 @@ angular.module('ui.grid')
       self.cellTooltip = function(row, col) {
         return self.grid.getCellValue( row, col );
       };
-    } else {
+    } else if (typeof(colDef.cellTooltip) === 'function' ){
       self.cellTooltip = colDef.cellTooltip;
+    } else {
+      self.cellTooltip = function ( row, col ){
+        return col.colDef.cellTooltip;
+      };
+    }
+
+    /**
+     * @ngdoc property
+     * @name headerTooltip
+     * @propertyOf ui.grid.class:GridOptions.columnDef
+     * @description Whether or not to show a tooltip when a user hovers over the header cell.
+     * If set to false, no tooltip.  If true, the displayName is shown in the tooltip (useful
+     * if you have long values in your headers), if a function then that function is called
+     * passing in the row and the col `headerTooltip( col )`, and the return value is shown in the tooltip,
+     * if a static string then shows that static string.
+     * 
+     * Defaults to false
+     *
+     */
+    if ( typeof(colDef.headerTooltip) === 'undefined' || colDef.headerTooltip === false ) {
+      self.headerTooltip = false;
+    } else if ( colDef.headerTooltip === true ){
+      self.headerTooltip = function(col) {
+        return col.displayName;
+      };
+    } else if (typeof(colDef.headerTooltip) === 'function' ){
+      self.headerTooltip = colDef.headerTooltip;
+    } else {
+      self.headerTooltip = function ( col ) {
+        return col.colDef.headerTooltip;
+      };
     }
 
+
     /**
      * @ngdoc property
      * @name footerCellClass

src/js/core/services/gridClassFactory.js

@@ -101,8 +101,8 @@
 
           var templateGetPromises = [];
 
-          // Abstracts the standard template processing we do for every template type
-          var processTemplate = function( templateType, providedType, defaultTemplate, filterType ) {
+          // Abstracts the standard template processing we do for every template type.
+          var processTemplate = function( templateType, providedType, defaultTemplate, filterType, tooltipType ) {
             if ( !colDef[templateType] ){
               col[providedType] = defaultTemplate;
             } else {
@@ -112,6 +112,13 @@
              templateGetPromises.push(gridUtil.getTemplate(col[providedType])
                 .then(
                 function (template) {
+                  var tooltipCall = ( tooltipType === 'cellTooltip' ) ? 'col.cellTooltip(row,col)' : 'col.headerTooltip(col)';
+                  if ( tooltipType && col[tooltipType] === false ){
+                    template = template.replace(uiGridConstants.TOOLTIP, '');
+                  } else if ( tooltipType && col[tooltipType] ){
+                    template = template.replace(uiGridConstants.TOOLTIP, 'title="{{' + tooltipCall + ' CUSTOM_FILTERS }}"');
+                  }
+
                   if ( filterType ){
                     col[templateType] = template.replace(uiGridConstants.CUSTOM_FILTERS, col[filterType] ? "|" + col[filterType] : "");
                   } else {
@@ -124,8 +131,8 @@
             );
 
           };
-          
-          
+
+
           /**
            * @ngdoc property
            * @name cellTemplate
@@ -135,9 +142,9 @@
            * must contain a div that can receive focus.
            *
            */
-          processTemplate( 'cellTemplate', 'providedCellTemplate', 'ui-grid/uiGridCell', 'cellFilter' );
+          processTemplate( 'cellTemplate', 'providedCellTemplate', 'ui-grid/uiGridCell', 'cellFilter', 'cellTooltip' );
           col.cellTemplatePromise = templateGetPromises[0];
-          
+
           /**
            * @ngdoc property
            * @name headerCellTemplate
@@ -146,7 +153,7 @@
            * is ui-grid/uiGridHeaderCell
            *
            */
-          processTemplate( 'headerCellTemplate', 'providedHeaderCellTemplate', 'ui-grid/uiGridHeaderCell', 'headerCellFilter' );
+          processTemplate( 'headerCellTemplate', 'providedHeaderCellTemplate', 'ui-grid/uiGridHeaderCell', 'headerCellFilter', 'headerTooltip' );
 
           /**
            * @ngdoc property

src/templates/ui-grid/uiGridHeaderCell.html

@@ -1,6 +1,6 @@
 <div ng-class="{ 'sortable': sortable }">
   <!-- <div class="ui-grid-vertical-bar">&nbsp;</div> -->
-  <div class="ui-grid-cell-contents" col-index="renderIndex">
+  <div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">
     <span>{{ col.displayName CUSTOM_FILTERS }}</span>
 
     <span ui-grid-visible="col.sort.direction" ng-class="{ 'ui-grid-icon-up-dir': col.sort.direction == asc, 'ui-grid-icon-down-dir': col.sort.direction == desc, 'ui-grid-icon-blank': !col.sort.direction }">