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

[英]Tooltip property for column header ui-grid angularjs


I am using cellTooltip property of colDef but that does not seems to be working.

我正在使用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>'},
];

Any help would be appreciated.

如有任何帮助,我们将不胜感激。

4 个解决方案

#1


1  

For header tooltip in ui-grid there is headerCellTemplate property available. This worked for me.

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

#2


1  

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:

Bhavjot的答案确实包含了一个很好的有棱角的工具提示,但是在每个单元格上,而不是像您所要求的那样包含标题。我看到你的模板起作用了,但如果你在寻找更有棱角的东西,我把这个模板放在一起:

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

此外,这里还有一个柱塞,您可以看到这两种工具提示一起工作。https://plnkr.co/edit/cCIKBWx0KfbIPUiheZP6?请把其中一个答案标记为你的问题的答案。

#3


0  

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.

默认情况下,网格的单元格被设置为隐藏任何溢出,因此如果您只是在其中弹出一个工具提示,它将不会出现。您可以通过向您的cellTemplate中添加一些自定义的溢出CSS来解决这个问题,或者如果您正在使用UI引导,您可以使用工具提示向元素添加tooltip- app端主体=“true”,并且工具提示将附加到主体上,并且完全定位到它需要的位置。

For Overflow CSS , add class "grid-tooltip" to cell template and define CSS class as:

对于溢出的CSS,在单元格模板中添加类“grid-tooltip”,并将CSS类定义为:

.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/

参考: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/

带有溢出CSS和UI引导的柱塞示例(tooltip- app端体="true"): http://embed。plnkr.co/v7a1w5mfhhag894idltk/

#4


0  

You can add a tooltip to the column header simply by adding headerTooltip: 'Custom header string' in the column definition.

只需在列定义中添加headerTooltip:“自定义标题字符串”,就可以向列标题添加工具提示。

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

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/11/22/d9abc01608e4a499a0065c738093605d.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com