柱标题UI-Grid Angularjs的工具提示属性

Question

我正在使用cellTooltip Coldef的属性，但似乎不起作用。

$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>'},
];

任何帮助将不胜感激。

Answer 1

您只需在列定义中添加headerTooltip: 'Custom header string'即可向列标题添加工具提示。

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

Answer 2

对于UI-Grid中的标题工具提示，有headerCellTemplate属性可用。这对我有用。

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的答案确实包含一个不错的角度工具提示，但在每个单元格上，而不是按照您的要求。我看到您的模板有效，但是如果您正在寻找更角度的东西，我将此模板放在一起：

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

另外，这是一个plunker，您可以在其中看到两种类型的工具提示。https://plnkr.co/edit/ccikbwx0kfbipuihezp6?p=preview请标记答案之一是您问题的答案。

Answer 4

默认情况下，网格的单元格被设置为隐藏任何溢出，因此，如果您只是在其中弹出一个工具提示，则不会出现。您可以通过在CellTemplate中添加一些自定义的溢出CSS来解决此问题，或者如果您使用UI Bootstrap，则可以使用工具提示将tooltip-append-to-body =" true"添加到" true"，并且工具提示将被附加到该元素身体，绝对位于需要的位置。

对于溢出CSS，将类"网格提示"添加到单元模板中，并将CSS类定义为：

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

参考：http：//brianhann.com/6-ways-to-take-control-of-how-how-your-ui-grid-data-is-isplayed/

plunker示例带有溢出CSS和UI Bootstrap（tooltip-append to-body =" true"）：http://embed.plnkr.co/v7a1w5mfhhag894idltk/

Answer 5

而不是CellTemplate或HeaderCellTemplate。您只需使用

将数据绑定

headerTooltip: 'my tooltip data'