Handsontable + Bootstrap tooltip for column header

Question

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>

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.

Answer 1

This part in your code is incorrect:

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

Your new lines break the dynamic html you are creating. Instead, try

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

or

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

Answer 2

First : change tooltip css Position => fixed

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

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();
    });
});