如何将工具提示附加到包括正文在内的所有元素之上?

时间:2016-02-10 15:18:26

标签: css angularjs kendo-ui kendo-grid tooltip

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

config.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>';
}

config.css

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

1 个答案:

答案 0 :(得分:0)

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

$ tooltipProvider.options({       appendToBody:是的     });