열 머리글에 대한 Handsontable + Bootstrap 툴팁

Handsontable 헤더에 부트 스트랩 툴팁을 추가하려고합니다. 내 테이블 인스턴스의 이름은 "hot"입니다. 관련 JS 부분은 다음과 같습니다.열 머리글에 대한 Handsontable + Bootstrap 툴팁

<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. 제대로하는 법을 설명하십시오.

출처

2016-06-05 Botond

코드에서이 부분은 잘못된 것입니다 :

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

출처

2016-06-06 20:48:42 adriennetacke

사실 내 원래 코드에는 한 줄로 표시했습니다. 좀 더 읽기 쉽게하기 위해 여기에 줄 바꿈을 넣으므로 확실히 문제가되지 않습니다. 의견을 주셔서 감사합니다, 나는 질문을 편집합니다. – Botond

아, 내 실수. 명확히 해 주셔서 감사합니다! – adriennetacke

의 첫 번째 시도 : 변화 툴팁 CSS의 위치를 => 고정

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

둘째 : 당신의 handsontable 변경 후, 헤더 후크 A를 다시 렌더링 afterRender 이벤트를 사용하여 툴팁을 다시 활성화합니다.

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

출처

2016-09-30 12:45:50

열 머리글에 대한 Handsontable + Bootstrap 툴팁

답변

관련 문제