css - 如何在包括正文在内的所有元素之上附加工具提示？

Question

我正在使用 kendo 网格，其中一个 td 有工具提示，但对于第一行，我的工具提示隐藏在 kendo 标题下，关于如何解决这个问题的任何想法我试图让它与 tooltip-append-to-body 一起工作并且还尝试使用 css 作为目标，但它不起作用。

配置.js

{
    field: 'locationComments',
    title: 'Location Comments',
    width: '210px',
    filterable: false,
    sortable: false,
    template: function () {
    return '<textarea class="zIndexTooltip" '+
    '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" tooltip-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>';
}

配置.css

.k-grid tr td textarea.zIndexTooltip {
    z-index:100020;
}

Answer 1

我在我的配置中添加了以下代码并使用 .tooltip 设置了 z-index 来解决我的问题。

$tooltipProvider.options({ appendToBody:真 });