javascript - Handsontable + 用于列标题的 Bootstrap 工具提示

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 位置 => 固定

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

第二:在你手动更改之后，标题将重新渲染 Hook afterRender 事件以再次启用工具提示。

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