Tabulator でtippy.js のツールチップが使いたいので試してみると出来ました。
rowFormatter で各行配下のエレメントを走査して、クラスやフィールド名が合致した場合、getElement()でエレメントを取得します。
後はエレメントに対してDOM操作でセットしています。
< コード例 >
// @@ 行をフォーマットする時 @@ //
rowFormatter: row => {
$.each($(row.getElement()).children(''), function (j, itm) {
const fld = $(this).attr('tabulator-field')
// tabulator-row-handle クラスがある場合 //
if ($(this).hasClass('tabulator-row-handle')) {
$(this).attr('title', 'Move this row by drag and drop')
$(this).addClass('tippydiv')
}
// フィールド名が '_'である場合 //
if (fld === '_') {
$(this).attr('title', 'Show runway details and map')
$(this).addClass('tippydiv')
}
})
// tippy //
tippy('.tippydiv', {
placement: 'bottom',
animation: 'scale',
duration: 1000,
arrow: true
})
}
})
// @@ 行をフォーマットする時 @@ //
rowFormatter: (row) => {
const iata = row.getData().iata_code
$.each($(row.getElement()).children(""), function (j, itm) {
const fld = $(this).attr("tabulator-field")
if ($(this).hasClass("tabulator-row-handle")) {
$(this).attr('title', "Move this row by drag and drop");
$(this).addClass('tippydiv');
}
if (fld === "cntrycd") {
$(this).attr("title", CNTRYMAME_MAP[row.getData().cntrycd_org])
//$(this).attr('title', "国名");
$(this).addClass("tippydiv")
}
if (fld === "__") {
$(this).attr("title", "By right click, context menu appear")
//$(this).attr('title', "国名");
$(this).addClass("tippydiv_top")
}
})
// tippy //
tippy(".tippydiv", {
placement: "bottom",
animation: "scale",
duration: 1000,
arrow: true,
})
// tippy //
tippy(".tippydiv_top", {
placement: "top",
animation: "scale",
duration: 1000,
arrow: true,
})
},
})
< 画面例 >
|