日: 2023年1月8日

 

 

 

Tabulatorのツールチップ表示につきましては、最初よくドキュメントを読まないで試した時、エラーになったりして表示できなく、それがプチとらうまとなって、DOMエレメント操作でtippy.jsのそれを使ってました。
ところ、今度はtippyが動作しなくなったので、Tabulatorのドキュメントを読み直して試したところできましたので備忘録しておきます。

< コード例 >

// オペレータロゴ //
{
    title: "|#",
    field: "opeflag",
    width: 26,
    hozAlign: "center",
    formatter: function (cell, formatterParams, onRendered) {

        const ope = cell.getRow().getData().NO_FLIGHT.slice(0, 2).toLowerCase()
        //console .log(ope)
        
        // 非可視にした他の列の値を参照 //
        const opename = cell.getRow().getData().NM_AIRLINE
        const icao = cell.getRow().getData().CD_ICAO
        const callsign = cell.getRow().getData().NM_CALLSIGN
        
        // 他の列の値を画像の親スパンの属性にセットする //
        const img = `<span iata="${ope.toUpperCase()}"
        opename="${opename}" icao="${icao}" callsign="${callsign}">
        <img src="Img/airline/airline_${ope}_square.png" width="20"
        onerror="this.style.display='none'"/>
        </span>`
        return img
    },
    tooltip: true,      // trueにしてツールチップを表示可能にする
    
    // ツールチップが見える時 //
    tooltip: function (e, cell, onRendered) {
        //e - mouseover event
        //cell - cell component
        //onRendered - onRendered callback registration function
        
        // エレメントを生成 //
        var el = document.createElement("div")
        el.style.backgroundColor = "black"
        el.style.color = "white"
        
        // formatterでセットした属性 //
        const cellelm = cell.getElement()
        const opename = $(cellelm).children("span").attr("opename")
        const icao = $(cellelm).children("span").attr("icao")
        const callsign = $(cellelm).children("span").attr("callsign")
        
        // HTMLにしてリターン //
        $(el).html(`${icao} : ${callsign}<br>${opename}`)

        return el
    },

},

< 画面例 >

フライト番号からIATAがわかるので、ICAOとコールサインとエアライン名をポップアップ

 

 

 

 

 

FlightradarのAPiでとれたカレントステータスをポップアップ