Question

我使用kendo网格作为数据，对于一个字段，我使用的是角度工具提示，所以我有一个工具提示问题，在第一行工具提示隐藏在kendo网格标题下所有其他行都适合z-index。所以我想在这个字段中添加z-index，这样它也可以在第一行显示。如何使用css实现该任务？

config.js

{
    field: 'locationComments',
    title: 'Location Comments',
    width: '210px',
    filterable: false,
    sortable: false,
    template: function () {
    return '<textarea  '+
    'data-tooltip-html-unsafe="<div>{{512 - this.dataItem.locationComments.length}} characters left</div>" '+
    'tooltip-trigger="{{{true: \'focus\', false: \'never\'}[this.dataItem.locationComments.length >= 0 || this.dataItem.locationComments.length == null ]}}" '+
    'tooltip-placement="top" dropdown-append-to-body="true" tooltip-class = "bluefill" '+
    'maxlength="512" #=gridStatus=="NOT_EDITABLE" ? "disabled" : "" # type="text" id="locationComments" name="locationComments" ng-model="this.dataItem.locationComments" ></textarea>';
}

main.css

.k-grid-content table tr td textarea.toolTipIndex {
    z-index:10002;
}

Answer 1

使用工具提示属性tooltip-append-to-body =“true”，使其位于dom之外，防止它弹出。

https://angular-ui.github.io/bootstrap/

如何设置工具提示z-index大于剑道网格标题？

1 个答案: