💡 라이브러리를 사용하여 쉽게 실현

Tippy.js이라는 라이브러리를 사용하여 kintone의 레코드 화면에 툴팁을 표시해 보았습니다.
마우스 커서가 닿으면 설명 설명선이 표시됩니다.

📌 Tippy.js 사용법

CDN 이 있기 때문에 이것을 사용합니다.
앱 설정 >> JavaScript/CSS로 커스터마이즈 >> PC용 JavaScript 파일 에
아래 URL을 추가합니다.
htps // 응 pkg. 이 m/치 py. js @ 3 / st / chi py. A l. 모두. js

※기본 CSS도 이 안에 포함됩니다.

기본 작성 방법은 이런 느낌입니다.

tippy('button', { content: "I'm a tooltip!" });
tippy(ツールチップを表示したい要素, { ツールチップに表示する内容やオプション });

📘 레코드 상세 화면

kintone.app.record.getFieldElement 에서 취득한 요소에 툴팁의 요소를 추가하면 OK.
간단하네요!

(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
        });
    });
})();

커스터마이즈로 추가한 버튼에 대해서, 설명을 넣어도 좋을 것 같네요.

(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 제3회 으로부터 빌려 왔습니다!

📝 레코드 추가 화면 · 편집 화면

이제 레코드에 정보를 입력할 때 "어떤 값을 입력하고 싶은지"를 보조적으로 표시하고 싶다는 요구가 많을까 생각합니다.
필드 상세 화면에서 했듯이, 필드 요소를 API로 취득하면 간단잖아, 라고 생각했는데・・・
레코드 세부 정보 화면에서 kintone.app.record.getFieldElement를 사용할 수 없습니다
무리하게 DOM 조작으로도 실현할 수 있습니다만, 장래적으로 움직이지 않게 될 리스크가 있습니다.

그래서 이번에는 공간 필드의 요소 가져오기(kintone.app.record.getSpaceElement)을 활용합니다.
이 API라면 레코드 추가 편집 화면에서도 사용할 수 있습니다!

모처럼이므로, Font Awesome 를 사용해, 스페이스 필드를 둔 곳에? 마크를 표시해 봅시다.

? 마크에 커서를 놓으면 설명이 표시됩니다.

🔧 설정 절차

설명을 원하는 필드 옆에 공백 필드를 추가합니다.
요소 ID도 잊지 마세요.


Font Awesome을 사용하고 싶으므로 Cybozu CDN에서 URL을 찾고,
앱 설정 >> JavaScript/CSS로 사용자 정의 >> PC용 CSS 파일에 URL을 추가합니다.

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, 꽤 편리해 보이네요.

툴팁 디스플레이는 다양한 사용자 정의가 가능합니다.
꼭, 공식 페이지 의 샘플을 봐 주세요.