列标题的Handsontable + Bootstrap工具提示 [英] Handsontable + Bootstrap tooltip for column header

问题描述

我正在尝试将Bootstrap工具提示添加到Handsontable标头中.我的表实例被命名为"hot".相关的JS部分如下:

I am trying to add a Bootstrap tooltip to a Handsontable header. My table instance is named "hot". The relevant JS part is below:

<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.如何正确地进行操作，我将不胜感激.

I also have a CSS style for the "tooltip-button" class. The problem is that when I hover over the header text, the "Column description" appears as an unformatted title instead of a properly formatted and animated tooltip box. I am new to JS so I can imagine countless reasons why this does not work. I would appreciate if you could 1. describe why this does not work and 2. how to do it properly.

推荐答案

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

First : change tooltip css Position => fixed

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

第二个:您的可手动更改后，标题将重新呈现 挂接afterRender事件以再次启用工具提示.

Second : after your handsontable change, the header will re-render hook a afterRender event to enable tooltip again.

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

这篇关于列标题的Handsontable + Bootstrap工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！