Question

我正在尝试将Bootstrap工具提示添加到Handsontable标头中。我的表实例名为“hot”。相关的JS部分如下：

<script>

hot.updateSettings({
colHeaders: ['Columname1', '<span style="color:white;" class="tooltip-button" data-toggle="tooltip" data-placement="bottom" title="Column description"> Columnname2 </span>']
});

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({trigger : 'hover', delay: {show: 700, hide: 100}});   
});

</script>

我也有“tooltip-button”类的CSS样式。问题是当我将鼠标悬停在标题文本上时，“列描述”显示为未格式化的标题，而不是正确格式化的动画工具提示框。我是JS的新手，所以我可以想象为什么这不起作用的无数原因。我很感激，如果你可以1.描述为什么这不起作用，以及2.如何正确地做到这一点。

Answer 1

首先：更改工具提示css位置=＆gt;固定

<style>
.tooltip {
    position: fixed;
}
</style>

第二：在你的动手改变之后，标题将重新渲染挂钩afterRender事件以再次启用工具提示。

$(document).ready(function() {
    $('[data-toggle="tooltip"]').tooltip();
    Handsontable.hooks.add('afterRender', function() {
        $('[data-toggle="tooltip"]').tooltip();
    });
});

Answer 2

您的代码中的这一部分不正确：

colHeaders: ['Columname1', '<span style="color:white;" \ 
         class="tooltip-button" data-toggle="tooltip" \ 
         data-placement="bottom" title="Column description"> Columnname2 </span>']

您的新行会破坏您正在创建的动态HTML。相反，尝试

colHeaders: ['Columname1', '<span style="color:white;" class="tooltip-button" data-toggle="tooltip" data-placement="bottom" title="Column description"> Columnname2 </span>']

或

colHeaders: ['Columname1', '<span style="color:white;"' +
             ' class="tooltip-button" data-toggle="tooltip"' +
             ' data-placement="bottom" title="Column description"> Columnname2 </span>']

列标题

2 个答案: