前提条件
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
var table = new Tabulator("#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の中に追記 -->
<div class="tabulator-tooltip">
<table class="tooltip-style">
<tr>
<td id="tabulator-tooltip-value"></td>
</tr>
</table>
</div>
<!-- -->
headタグにCSSを追記 ※ もちろん別ファイルに追記でOK
<head>
<meta http-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: 1px solid black;
}
</style>
</head>
先ほどのTabulatorの生成コードを変更
var table = new Tabulator("#example-table", {
height: 205,
data: table_data,
layout: "fitColumns",
tooltips: function (cell) {
var cellElement = $(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を変えれば、カスタマイズとフォントサイズとかを変えれる 