Подсказка для удобной подсказки + Bootstrap для заголовка столбца

Question

Я пытаюсь добавить всплывающую подсказку 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 для класса «tooltip-button». Проблема в том, что когда я наводил текст заголовка, «описание столбца» отображается как неформатированный заголовок вместо правильно отформатированной и анимированной всплывающей подсказки. Я новичок в JS, поэтому могу представить себе бесчисленные причины, почему это не работает. Я был бы признателен, если бы вы могли 1. описать, почему это не работает, и 2. как это сделать должным образом.

Answer 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>'] 

Answer 2

Первое: изменение подсказки CSS позицию => фиксированной

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

Второе: после handsontable изменения, заголовок будет повторно вынести крюк afterRender, чтобы снова включить подсказку.

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