kintoneのレコード画面にツールチップを表示する

#💡 ライブラリを使って簡単に実現
[Tippy.js](https://atomiks.github.io/tippyjs/)というライブラリを利用して、kintoneのレコード画面にツールチップを表示してみました。
マウスカーソルが当たったところに、説明の吹き出しを表示します。
![Qiita_tooltip01.png](https://qiita-image-store.s3.amazonaws.com/0/197668/012caec7-b9ec-4980-81e6-ab212c2e1ee7.png)
#📌 Tippy.jsの使い方
[CDN](https://atomiks.github.io/tippyjs/#getting-started-option-1-cdn)があるようなのでこれを使います。
アプリの設定 >> JavaScript/CSSでカスタマイズ >> PC用のJavaScriptファイル に
下記のURLを追加します。
https://unpkg.com/tippy.js@3/dist/tippy.all.min.js
![Qiita_tooltip00.png](https://qiita-image-store.s3.amazonaws.com/0/197668/77fa3c36-bf22-6a25-da0a-245e1497bcc1.png)
※基本のCSSもこの中に含まれます。

基本の書き方はこんな感じです。

```javascript
tippy('button', { content: "I'm a tooltip!" });
tippy(ツールチップを表示したい要素, { ツールチップに表示する内容やオプション });
```
#📘 レコード詳細画面
[kintone.app.record.getFieldElement](https://developer.cybozu.io/hc/ja/articles/201942014#step3)で取得した要素にツールチップの要素を追加すればOK。
簡単ですね！
![Qiita_tooltip01.png](https://qiita-image-store.s3.amazonaws.com/0/197668/012caec7-b9ec-4980-81e6-ab212c2e1ee7.png)

```javascript
(function() {
    'use strict';
    /* global tippy */

    kintone.events.on('app.record.detail.show', function(event) {
        var targetField = kintone.app.record.getFieldElement('Text');

        tippy(targetField, {
            content: '説明ですよ',
            arrow: true
        });
    });
})();
```

カスタマイズで追加したボタンに対して、説明を入れてもよさそうですね。
![Qiita_tooltip02.png](https://qiita-image-store.s3.amazonaws.com/0/197668/05087c05-e312-58ce-7531-74fc03f8b9fd.png)

```javascript
(function() {
    "use strict";
    /* global tippy */

    kintone.events.on('app.record.detail.show', function(event) {
        // メニュ右側の空白部分にボタンを設置
        var myIndexButton = document.createElement('button');
        myIndexButton.id = 'my_index_button';
        myIndexButton.innerHTML = 'メニュー部ボタン';
        myIndexButton.onclick = function() {
            window.alert('メニュー部');
        };
        tippy(myIndexButton, {
            content: 'ボタンの説明ですよ',
            arrow: true
        });
        kintone.app.record.getHeaderMenuSpaceElement().appendChild(myIndexButton);
    });
})();
```
※ベースとなるJSは、[はじめようkintone APIの第３回](https://developer.cybozu.io/hc/ja/articles/201952870)からお借りしてきました！
#📝 レコード追加画面・編集画面
さて、レコードに情報を入力するとき、「どのような値を入力してほしいか」を補助的に表示したい、というニーズは多いかと思います。
フィールド詳細画面でやったように、フィールド要素をAPIで取得すれば簡単じゃん、と思いきや・・・
レコード追加画面・編集画面では kintone.app.record.getFieldElement が使えない:scream:
無理やりDOM操作でも実現できますが、将来的に動かなくなるリスクがあります。

そこで今回は、[スペースフィールドの要素を取得する（kintone.app.record.getSpaceElement）](https://developer.cybozu.io/hc/ja/articles/201942014#step6)を活用します。
このAPIならレコード追加・編集画面でも使えます！

せっかくなので、[Font Awesome](https://fontawesome.com/) を使って、スペースフィールドを置いたところに？マークを表示してみましょう。
![Qiita_tooltip04.png](https://qiita-image-store.s3.amazonaws.com/0/197668/26a90fbc-1782-1676-8239-1e9356968d34.png)
？マークにカーソルを合わせると、説明が表示されるようにします。
![Qiita_tooltip05.png](https://qiita-image-store.s3.amazonaws.com/0/197668/9e7d602f-072b-0d0d-63c0-720feddcecc2.png)
##🔧 設定手順
説明を付けたいフィールドの横にスペースフィールドを追加。
要素IDも忘れずにつけます。
![Qiita_tooltip03.png](https://qiita-image-store.s3.amazonaws.com/0/197668/6173297a-5df2-1392-5612-84debdfb9610.png)

Font Awesome を使いたいので、[Cybozu CDN](https://developer.cybozu.io/hc/ja/articles/202960194)からURLを探し、
アプリの設定 >> JavaScript/CSSでカスタマイズ >> PC用のCSSファイル にURLを追加します。
![Qiita_tooltip06.png](https://qiita-image-store.s3.amazonaws.com/0/197668/ee8b1ff7-32e1-02af-3d9e-645f450586b2.png)
JavaScriptでのカスタマイズは下記のとおりです。

```javascript
(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);
    });
})();
```
#🚀 おわり
Tippy.js、なかなか便利そうですね。

ツールチップの表示は、色々カスタマイズできます。
ぜひ、[公式ページ](https://atomiks.github.io/tippyjs/)のサンプルを見てみてください。