Tooltip property for column header ui-grid angularjs

Question

I am using cellTooltip property of colDef but that does not seems to be working.

$scope.gridOptions.columnDefs = [{ displayName: 'Test', field: '_test', 
    cellTooltip: function (row, col) { return row.entity._Number },
    cellTemplate: '<div class="ui-grid-cell-contents" title="{{row.entity._Number}}"></div>'},
];

Any help would be appreciated.

Answer 1

You can add a tooltip to the column header simply by adding headerTooltip: 'Custom header string' in the column definition.

https://github.com/angular-ui/ui-grid/issues/3118

Answer 2

For header tooltip in ui-grid there is headerCellTemplate property available. This worked for me.

headerCellTemplate: '<div class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"><span class="ui-grid-header-cell-label ng-binding" title="Test">Test</span></div>'

Answer 3

Bhavjot's answer does contain a nice angular tooltip, but on each cell, not the header as you asked for. I see your template works, but if you are looking for something more angular I put together this template:

<div class="grid-tooltip" tooltip="{{ col.displayName }}" tooltip-
    placement="{{ renderIndex === 0 ? 'right' : 'left'}}">
    <div class="ui-grid-cell-contents">
        {{ col.displayName }}
    </div>
</div>

Also, here is a plunker where you can see both types of tooltips working together. https://plnkr.co/edit/cCIKBWx0KfbIPUiheZP6?p=preview Please mark one of the answers as the answer to your question.

Answer 4

By default the grid’s cells are set to hide any overflow, so if you just pop a tooltip in there it won’t show up. You can solve this by either adding some custom overflow CSS to your cellTemplate, or if you’re using UI Bootstrap you can add tooltip-append-to-body="true" to the element with your tooltip and the tooltip will be appended to the body and absolutely positioned where it needs to be.

For Overflow CSS , add class "grid-tooltip" to cell template and define CSS class as:

.grid-tooltip {
  overflow: visible;
  z-index: 9999999;
  float: left;
}

Reference: http://brianhann.com/6-ways-to-take-control-of-how-your-ui-grid-data-is-displayed/

Plunker example with Overflow CSS and UI Bootstrap (tooltip-append-to-body="true") : http://embed.plnkr.co/v7a1W5mFHHaG894IDLTK/

Answer 5

Instead of cellTemplate or headerCellTemplate. You can simply bind your data in columnDefs with

headerTooltip: 'my tooltip data'