アプリの任意のフィールドに補足説明のツールチップを設置できるプラグインです。
kintoneのフォームに入力ルールや注意事項を書きたいけれど、フィールドの近くに常時テキストを表示すると画面が窮屈になる….
そんな悩みを解決するのが「ツールチップ設定プラグイン(Field Tooltip Plugin)」です。
対象フィールドのラベル横にⓘアイコンを表示し、マウスオーバー(またはキーボードフォーカス)した時だけ補足メッセージを吹き出しで表示します。普段は画面をすっきり保ちながら、必要な人だけが必要なタイミングで説明を読める、いわゆる「ツールチップUI」をノーコードでkintoneに組み込めます。
プラグインの主な機能と特徴
- ⓘアイコン+ツールチップ表示
対象フィールドのラベル横に「ⓘ」アイコンを追加。ホバー/フォーカス時にのみ補足メッセージを表示するため、フォームのレイアウトを崩しません。 - レコード詳細・登録・編集画面に対応(PC版)
1つの設定で、レコード詳細画面/新規登録画面/編集画面すべてにツールチップが表示されます(本プラグインはPC版画面対応向けです)。 - 複数フィールドへの一括設定
設定画面の「+ 設定を追加」ボタンで、1アプリ内の複数フィールドに対してそれぞれ異なるメッセージを設定できます。「×」ボタンで不要な設定を削除可能です(最低1件は必須のため、残り1件になると削除ボタンは自動的に無効化されます)。 - 対象フィールドはドロップダウンで選択
設定画面でアプリのフィールド一覧を自動取得し、ドロップダウンリストから選ぶだけなのでフィールドコードを手入力する必要がありません。 - 文字色・背景色を自由にカスタマイズ
#ffffffのようなカラーコードだけでなく、whiteやcornflowerblueといったCSSカラー名でも指定可能。入力欄の右側にリアルタイムで色プレビューが表示されるので、配色ミスを防げます。 - kintone UI Component(KUC)採用
サイボウズ公式の部品ライブラリ「kintone UI Component」のTooltipを使用しているため、標準的な見た目・挙動でkintoneの画面になじみます。 - デバッグログ出力オプション
設置状況を確認したい場合は、設定画面の「デバッグログをコンソールに出力する」にチェックを入れることで、ブラウザのコンソールに動作ログを出力できます。
tooltip表示の動作ルール(デモ画面)
基本動作:ホバー/フォーカスで表示
ⓘアイコンにマウスカーソルを乗せる、またはキーボードのTabキーでフォーカスを当てると、あらかじめ設定したメッセージが吹き出し状に表示されます。カーソルを外す(フォーカスが外れる)と自動的に非表示になります。

画面端でも文字が見切れない自動調整
通常、ツールチップはアイコンの真上に左右均等に開きますが、画面の左端・右端に近いフィールドでは、はみ出した部分が見えなくなってしまいます。
本プラグインはアイコンの表示位置を判定し、余白が足りない場合は自動的に表示方向(上/左/右)と吹き出しの幅を調整するため、どの位置のフィールドでも文章が見切れずに読めます。

表示位置はラベルの横に統一
ⓘアイコンは常にフィールドの「ラベル」側に表示され、入力値・表示値のエリアには影響しません。
そのため、値の文字数やレイアウトが変わってもツールチップの表示位置がズレたり、フィールドの高さが崩れたりすることはありません。
プラグインの設定方法
kintoneの「プラグイン一覧」からZIPファイルを読み込み、対象アプリにプラグインを追加します。
アプリの設定画面を開き、「ツールチップ設定プラグイン」の設定アイコンをクリックします。

- 「対象フィールド」のプルダウンから、ツールチップを表示したいフィールドを選択します。
- 「表示メッセージ」欄に、フィールドの補足説明(入力ルールや注意事項など)を入力します。
- 「文字色」「背景色」をカラーコードまたは色名で指定します。右側のプレビューで確認できます。
- 複数フィールドに設定したい場合は「+ 設定を追加」ボタンで行を追加し、①〜③を繰り返します。不要な設定は右上の「×」ボタンで削除できます。
- 動作確認が必要な場合に「デバッグログをコンソールに出力する」にチェックを入れます(通常運用時はオフで問題ありません)。
- 「保存する」をクリックし、アプリの設定画面に戻って「アプリを更新」を行えば設定完了です。
まとめ
「ツールチップ設定プラグイン」は、kintoneのフォームレイアウトを変えずに、フィールドごとの入力ルールや注意事項を“必要な時だけ”表示できるシンプルな機能を提供するプラグインです。複数フィールドへのまとめ設定、文字色・背景色のカスタマイズ、画面端での表示崩れ対策までカバーしているため、業務マニュアルの一部をアプリ内に埋め込むような感覚で、入力ミスや問い合わせ対応の手間を減らすことができます。
「入力ルールを都度説明するのが大変」「新入社員がよく入力を間違える」といった悩みがあるアプリに、ぜひ導入を検討してみてください。
💻 試用版プラグインのお申込み
本プラグインの試用版(60日間)をご希望の方は、以下のフォームからお申し込みください。
お申込み者のEメール宛に「試用版ダウンロードのご案内」をEメールでご送付します。
★★ kintoneの「ドメイン名」は正確にご記入ください。★★
📬 お問い合わせ・料金体系
本プラグインは、下記の料金プランで販売しています。
ご購入を希望される場合は、各プランの「購入する」ボタンからお申込みください。
簡易サポート契約では、当サイトのアプリテンプレートとプラグインを合計6種類までご利用できます。
会員サポート契約では、導入支援から運用ヘルプデスク対応をフルサービスでご提供します。
| 項目 | 買い取り方式 | 簡易サポート | 会員サポート |
|---|---|---|---|
| 料金体系 | 60,000円 (税抜) | 120,000円 (税抜) | 360,000円 (税抜) |
| 契約期間 | - | 毎年更新 | 6か月更新 |
| 導入サポート | ✔ | ✔ | ✔ |
| メールサポート | × | ✔ | ✔ |
| チャットサポート | × | ✔ | ✔ |
| バージョンアップ対応 | × | ✔ | ✔ |
| 運用ヘルプデスク対応 | × | × | ✔ |
| 商品のご利用範囲 | 本商品のみ | 6種類までご利用可能 ユーザー数10名まで |
無制限 ユーザー数30名まで |
| お問い合わせ/お申し込み | 購入する | お申込み |
リリースノート
【名称】kintoneツールチップ設定プラグイン
【概要】アプリの任意のフィールドに補足説明のツールチップを設置できるプラグインです。
- 2026/07/09Ver1.0.0
初期バージョンの公開
プラグインの基本機能を実装 - 2026/07/10Ver1.0.4
.control-label-gaia(ラベル要素)を自動探索して設置対象とするように修正
アイコンの表示位置を判定し、余白が足りない場合は自動的に表示方向(上/左/右)と吹き出しの幅を調整する機能を追加
tooltipの文字色と背景色に英語のカラー名でも指定可能&色プレビューする様に修正
プラグイン設定画面のレイアウトデザインを微調整 - 2026/07/11Ver1.0.5
.control-label-gaia(ラベル要素)DOM検索を親ツリーから検索するロジックに改良
KUCライブラリをCDN版(Ver1.22.0)からUMD版(Ver1.25.0)に変更 - 2026/07/11Ver1.1.0
ライセンス認証機能を追加
プラグイン設定画面にライセンス状態と有効期限を表示する機能を追加
このプラグインで利用しているOSSのライセンスは以下の通りです。
- kintone UI Component v1
- Cybouz.inc
- License: MIT License
関連記事
以下の記事は、アプリにTooltip(吹き出しヒント)を表示するプラグインの活用事例の紹介記事です。

以下の記事は、JavascriptカスタマイズでTooltipを実装する事例のnote記事です。
記事内のサンプルコードは無料で利用できますので、自力でカスタマイズに挑戦したい方は参考にして下さい。
「note:アプリ活用研究会(キン活)」は、当サイトのメンバーが執筆しています。


#kintone #plugin #Tooltip
