Tabulator で tippyのツールチップ

 

 

 

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,
      })
    },
  })

< 画面例 >

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

JavaScriptコードレシピ集 スグに使えるテクニック278 最新ECMAScri [ 池田泰延 ]
価格:3278円(税込、送料無料) (2022/12/23時点)

楽天で購入

 

 

コメントを残す