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

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

对于 ui-grid 中的 header 工具提示，有 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 2

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

对于溢出 CSS ，将 class "grid-tooltip" 添加到单元格模板并将 CSS class 定义为：

.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 (tooltip-append-to-body="true") 的 Plunker 示例： http://embed.plnkr.co/v7a1W5mFHHaG894IDLTK/

Answer 3

Bhavjot 的回答确实包含一个很好的 angular 工具提示，但在每个单元格上，而不是您要求的 header。我看到你的模板有效，但如果你正在寻找更多的东西 angular 我整理了这个模板：

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

另外，这里有一个插件，您可以在其中看到两种类型的工具提示一起工作。 https://plnkr.co/edit/cCIKBWx0KfbIPUiheZP6?p=preview 请将其中一个答案标记为您问题的答案。

Answer 4

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

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