Tippy.jsによるツールチップをレコード編集画面で表示させる方法

背景・実現したいこと

 Tiipy.jsを使ってフィールドにカーソルを合わせた時にツールチップが表示されるようにしています。後に例示するコードでレコード詳細画面ではツールチップを表示させられるのですが、編集や追加画面では表示されません。編集、追加ではkintone.app.record.getFieldElementが使えないためかと思うのですが、編集画面でもツールチップを表示させる方法はありますでしょうか。

tippyの使い方としても現在はツールチップの数だけtippy();を繰り返し記述しているのですが、まとめて記述できる方法があればご教示いただけますと幸いです。

 

エラー情報

kintone.app.record.getFieldElementが実行できないためか、変数mainmessage,fromがnullになってしまいます。

 

利用したソースコード

(function () {

  ‘use strict’;

 

    const eventsShowDetail = [

      ‘app.record.detail.show’,

      ‘app.record.create.show’,

      ‘app.record.edit.show’

    ];

    kintone.events.on(eventsShowDetail, function(event) {

      let mainmessage = kintone.app.record.getFieldElement(‘通信欄’);

      let from = kintone.app.record.getFieldElement(‘差出人’);

      tippy(mainmessage, {

        content: ‘送付内容主文’,

        arrow: true

      });

      tippy(from, {

        content: ‘差出人名’,

        arrow: true

      });

})();

自己解決しましたが同じ内容でお困りの方がいた時のために追記します。

 

編集画面ではやはりkintone.app.record.getFieldElementが使えないようですので、

非推奨だと思いますが編集時は表示させたいdiv要素を取得して指定したところ表示させることができました。

下記のサイトでフィールドの内部IDが取得できるようでしたので、

フィールドコードで要素のIDを動的に取得して処理することができました。

https://qiita.com/the_red/items/702d8f3672f277c5eac7

 

ツールチップは下記のTippyを利用しました。

https://atomiks.github.io/tippyjs/

 

========================

(function () {

  ‘use strict’;

    const eventsShowDetail = [

      ‘app.record.detail.show’

    ];

    kintone.events.on(eventsShowDetail, function(event) {

      usetippy(‘show’);

    });

    const eventsEdit = [

      ‘app.record.create.show’,

      ‘app.record.edit.show’

    ];

    kintone.events.on(eventsEdit, function(event)  {

      usetippy(‘edit’);

    });

  

    function usetippy(viewType) {

      let tooltipList = [

        [‘通信欄’, ‘送付内容の主文をここに書いてください’],

        [‘差出人’, ‘差出人名を書いてください’]

      ];

      switch (viewType) {

        case ‘show’:

          for (const element of tooltipList) {

            tippy(kintone.app.record.getFieldElement(element[0]), {

              content: element[1],

              arrow: true

            });

          }

          break;

        case ‘edit’:

          // フィールドIDを調べる

          const fields = Object.values(cybozu.data.page.FORM_DATA.schema.table.fieldList)

          const fieldMap = fields.reduce((map, field) => ({ …map, [field.var]: field }), {})

          for (const element of tooltipList) {

            tippy(‘div.control-value-gaia.value-’ + fieldMap[element[0]].id, {

              content: element[1],

              arrow: true

            });

          }

          break;

 

      }

    }

})();