Question

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

$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”添加到元素中，并且工具提示将附加到身体和绝对定位在它需要的地方。

对于Overflow CSS，将类“grid-tooltip”添加到单元格模板并将CSS类定义为：

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

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

使用溢出CSS和UI Bootstrap的Plunker示例（tooltip-append-to-body =“true”）： http://embed.plnkr.co/v7a1W5mFHHaG894IDLTK/

列标题ui-grid angularjs的工具提示属性

4 个答案: