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.

Transported

What have you tried, share code pls and error messages if any. Also see stackoverflow.com/help/how-to-ask – Ardeb

Answer 1

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>'

Transported

to extend or customize default header template you can take a look at the original template here: github.com/angular-ui/ui-grid/blob/master/src/templates/ui-grid/… – Aircool

Maybe it's a new feature, but @Homer's answer seems a better solution: https://mcmap.net/q/1962584/-tooltip-property-for-column-header-ui-grid-angularjs – Stringency

Answer 2

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

Barbellate

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.

Chema

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/

Esposito

Answer 5

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

headerTooltip: 'my tooltip data'

Corsair