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.

What have you tried, share code pls and error messages if any. Also see http://stackoverflow.com/help/how-to-ask — Jax, Nov 22 '16 at 11:10

score 5 · Answer 1 · answered Mar 30 '18 at 16:53

5

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

answered Mar 30 '18 at 16:53

Homer

7,594
14
69
109

score 3 · Accepted Answer · answered Nov 22 '16 at 14:32

3

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

answered Nov 22 '16 at 14:32

Surendra Mourya

593
3
8
29

to extend or customize default header template you can take a look at the original template here: https://github.com/angular-ui/ui-grid/blob/master/src/templates/ui-grid/uiGridHeaderCell.html – Marco C. Jun 07 '17 at 09:58
Maybe it's a new feature, but @Homer's answer seems a better solution: https://stackoverflow.com/a/49578264/6996150 – johey Dec 05 '18 at 10:08

score 1 · Answer 3 · answered Jun 02 '17 at 14:20

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.

score 0 · Answer 4 · answered Feb 08 '17 at 01:00

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/

score 0 · Answer 5 · answered Jul 09 '23 at 06:19

0

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

headerTooltip: 'my tooltip data'

answered Jul 09 '23 at 06:19

Albin C S

340
1
5

Tooltip property for column header ui-grid angularjs

5 Answers5