前提条件
http://tabulator.info/ ⇒ V4.5
内容
Tabulatorでツールチップを実装するのは簡単だが
カスタマイズしたい機会があったので備忘録として。
（Tabulatorの標準ツールチップ機能はカスタマイズができない。。。）
参考
https://so-zou.jp/web-app/tech/programming/javascript/event/handler/mouse/
http://tabulator.info/
実装
・標準のツールチップ
ツールチップの実装はここを参考に
http://tabulator.info/docs/4.5/format#tooltips
vartable=newTabulator("#example-table",{height:205,data:table_data,layout:"fitColumns",columns:[{title:"Name",field:"name",width:64,// これだけでツールチップが実装されるtooltip:true},{title:"Age",field:"age",align:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",align:"center"},],});・ツールチップのカスタマイズ
※jQueryを導入しています。
ツールチップ用のタグを追加
<!-- Bodyの中に追記 --><divclass="tabulator-tooltip"><tableclass="tooltip-style"><tr><tdid="tabulator-tooltip-value"></td></tr></table></div><!-- -->
headタグにCSSを追記
※ もちろん別ファイルに追記でOK
<head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"><title>Tabulator-test</title><style>/* ここを新規に追加 */.tabulator-tooltip{opacity:0;background-color:#fff;min-width:150px;width:auto;height:auto;position:absolute;max-width:330px;border-radius:5px;padding:10px;color:black;border:1pxsolidblack;}</style></head>
先ほどのTabulatorの生成コードを変更
vartable=newTabulator("#example-table",{height:205,data:table_data,layout:"fitColumns",tooltips:function(cell){varcellElement=$(cell.getElement());cellElement.on('mouseover',function(){$('.tabulator-tooltip #tabulator-tooltip-value').text(cell.getValue());});cellElement.on('mousemove',function(e){$('.tabulator-tooltip').css('opacity',1);$('.tabulator-tooltip').css('left',e.pageX+30+'px');$('.tabulator-tooltip').css('top',e.pageY-10+'px');});cellElement.on('mouseleave',function(e){$('.tabulator-tooltip').css('opacity',0);});return'';},columns:[{title:"Name",field:"name",width:64,},{title:"Age",field:"age",align:"left",formatter:"progress"},{title:"Favourite Color",field:"col"},{title:"Date Of Birth",field:"dob",sorter:"date",align:"center"},],});
完成♪
これでCSSを変えれば、カスタマイズとフォントサイズとかを変えれる
