Handsontable + Bootstrap 列标题的工具提示答案

【问题标题】：Handsontable + Bootstrap tooltip for column headerHandsontable + Bootstrap 列标题的工具提示
【发布时间】：2016-10-05 08:28:41
【问题描述】：

我正在尝试将 Bootstrap 工具提示添加到 Handsontable 标头。我的表实例被命名为“热”。相关的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>

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

【问题讨论】：

标签： javascript twitter-bootstrap-3 handsontable

【解决方案1】：

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

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】：

首先：更改工具提示 css 位置 => 固定

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

第二：在您进行可操作的更改后，标题将重新呈现挂钩 afterRender 事件以再次启用工具提示。

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

【讨论】：