ツールチップがうまく適用されません。

黒丸?マークのツールチップを作成したアプリ内で付けたいのですが、

表示がされない状況です。

設定手順を確認し、設定しているのですが、当方初心者で間違いが見つけられません。

ミスがありましたら、ご教授いただけましたら幸いです。

●PC用のJavaScriptファイル

https://js.cybozu.com/font-awesome/v5.5.0/css/fontawesome-all.min.css

 

●試したコード

(function() {
‘use strict’;
/* global tippy */

kintone.events.on([‘app.record.create.show’, ‘app.record.edit.show’], function(event) {
// Font Awesome の "question-circle"を表示
var mySpaceField = document.createElement(‘i’);
mySpaceField.className = ‘fas fa-question-circle’;

tippy(mySpaceField, {
arrow: true,
content: ‘●●●●’
});
kintone.app.record.getSpaceElement(‘space01’).appendChild(mySpaceField);
});
})();

 

●テキストファイルの保存

ファイルの種類… .js

文字コード…UTF-8

 

●スペースの要素ID

こんにちは。
私の環境で表示の確認ができましたので、2 点アドバイスさせてください。

  1. Font Awsome の CDN について
    https://js.cybozu.com/font-awesome/v5.5.0/css/fontawesome-all.min.css

利用されているこちらの CDN ですが、拡張子は CSS です。
なので、「PC用のCSSファイル」へ URL を追加します。(自分も引っかかりました…)

  1. Tippy について
    Tippy を利用するためには、ライブラリを読み込ませる必要があります。
    公式のドキュメントの Get Started を参考に CDN を「PC用のJSファイル」へ追加します。
    https://atomiks.github.io/tippyjs/v6/getting-started/

 

以上の手順で問題なく表示することができました。

表示されないときは裏でエラーが出ている可能性が高いです。
処理が動かなかったり表示されない場合は、この記事を参考にしてデバッグしてみてください。
https://developer.cybozu.io/hc/ja/articles/207613916

ありがとうございます!
お忙しいところアドバイスくださり感謝申し上げます。
さっそくこの後トライしてみます。