「ツールチップ設定プラグイン」で、フィールドに入力ヒントの説明表示

アプリの任意のフィールドに補足説明のツールチップを設置できるプラグインです。

kintoneのフォームに入力ルールや注意事項を書きたいけれど、フィールドの近くに常時テキストを表示すると画面が窮屈になる….
そんな悩みを解決するのが「ツールチップ設定プラグイン(Field Tooltip Plugin)」です。

対象フィールドのラベル横にⓘアイコンを表示し、マウスオーバー(またはキーボードフォーカス)した時だけ補足メッセージを吹き出しで表示します。普段は画面をすっきり保ちながら、必要な人だけが必要なタイミングで説明を読める、いわゆる「ツールチップUI」をノーコードでkintoneに組み込めます。

プラグインの主な機能と特徴

  • ⓘアイコン+ツールチップ表示
    対象フィールドのラベル横に「ⓘ」アイコンを追加。ホバー/フォーカス時にのみ補足メッセージを表示するため、フォームのレイアウトを崩しません。
  • レコード詳細・登録・編集画面に対応(PC版)
    1つの設定で、レコード詳細画面/新規登録画面/編集画面すべてにツールチップが表示されます(本プラグインはPC版画面対応向けです)。
  • 複数フィールドへの一括設定
    設定画面の「+ 設定を追加」ボタンで、1アプリ内の複数フィールドに対してそれぞれ異なるメッセージを設定できます。「×」ボタンで不要な設定を削除可能です(最低1件は必須のため、残り1件になると削除ボタンは自動的に無効化されます)。
  • 対象フィールドはドロップダウンで選択
    設定画面でアプリのフィールド一覧を自動取得し、ドロップダウンリストから選ぶだけなのでフィールドコードを手入力する必要がありません。
  • 文字色・背景色を自由にカスタマイズ
    #ffffff のようなカラーコードだけでなく、whitecornflowerblue といった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/09
      Ver1.0.0

      初期バージョンの公開
      プラグインの基本機能を実装

    • 2026/07/10
      Ver1.0.4

      .control-label-gaia(ラベル要素)を自動探索して設置対象とするように修正
      アイコンの表示位置を判定し、余白が足りない場合は自動的に表示方向(上/左/右)と吹き出しの幅を調整する機能を追加
      tooltipの文字色と背景色に英語のカラー名でも指定可能&色プレビューする様に修正
      プラグイン設定画面のレイアウトデザインを微調整

    • 2026/07/11
      Ver1.0.5

      .control-label-gaia(ラベル要素)DOM検索を親ツリーから検索するロジックに改良
      KUCライブラリをCDN版(Ver1.22.0)からUMD版(Ver1.25.0)に変更

    • 2026/07/11
      Ver1.1.0

      ライセンス認証機能を追加
      プラグイン設定画面にライセンス状態と有効期限を表示する機能を追加

    このプラグインで利用しているOSSのライセンスは以下の通りです。

    関連記事

    以下の記事は、アプリにTooltip(吹き出しヒント)を表示するプラグインの活用事例の紹介記事です。

    kintoneの「ツールチップ設定プラグイン」でフィールドに説明機能を追加
    kintoneでアプリを運用していると、こんな場面はありませんか。「取引先名は正式名称で入力してほしいのに、略称や表記ゆれがなくならない」「入力ルールをマニュアルに書いても、そもそも見てもらえない」「新しく入ったメンバーが、毎回同じ入力ミスをしてしまう」こうした「入力時にちょっとした説明が欲しい」という悩みを、フォームのレイアウトを崩さずに解決できるのが「ツールチップ設定プラグイン(Field Tooltip Plugin)」です。対象フィールドのラベル横に「ⓘ」アイコンを表…

    以下の記事は、JavascriptカスタマイズでTooltipを実装する事例のnote記事です。
    記事内のサンプルコードは無料で利用できますので、自力でカスタマイズに挑戦したい方は参考にして下さい。

    アプリに操作ガイドのツールチップを実装する|アプリ活用研究会(キン活)
    やりたいこと Kintoneアプリの操作でユーザーが迷わない様に、操作方法のガイド等を表示する「ツールチップ」を実装したい。 標準機能ではアプリのフォームに「ツールチップ」を付ける機能は無いので kintone UI Component v1のコンポーネントTooltipを利用して実装します。 「ツールチップ」とは、kintoneの基本操作のアイコンにも表示される吹き出し型のヒント文字のことです。 kintone基本操作アイコンのツールチップ ツールチップとは、フォーム等の対…
    アプリのテーブルに入力補助機能を付加する|アプリ活用研究会(キン活)
    やりたいこと Kintoneアプリのテーブル中のフィールドに入力補助機能を付けたい。 具体的には、テーブルの各項目にプレイスホルダー(代用文字)やツールチップ(吹き出し型のヒント)を実装したい。 標準機能のテーブルでは、この様なカスタマイズは出来ませんので、本稿では、kintone UI Component v1のTableを利用してカスタマイズ版のテーブル(KUC版テーブルと呼びます)を作成する事例を紹介します。 KUC版テーブルの役割はテーブル枠機能だけなので、他のコンポ…

    #kintone #plugin #Tooltip

    スポンサーリンク
    シェアする

    おすすめ記事「AI時代の人材戦略」

    デジトラ−業務のデジタル化にトライする

    事例紹介

    ACHIEVEMENTS
    kintoneの作業日報で作業状態の「見える化」を実現
    まちライブラリーのkintone活用
    製造業の受注データ管理をエクセルから移行

    Tips

    TIPS
    kintone業務活用
    プロセス管理の停滞を解消!|ステータス一括更新プラグイン
    kintone
    複数フィールドの値を結合する「フィールド結合プラグイン」の紹介
    kintone
    日付や日時の計算結果をフィールドにセットするプラグインの紹介
    補助金の活用についてもご相談ください

    中小企業のデジタル化に利用できる補助金や助成金があります。
    補助金や助成金は申請できる企業や用途に要件があったり、事業計画書を作成する必要があったりします。
    必要な手続きをサポートさせていただきますので、お気軽にご相談ください。

    お気軽にご相談ください。

    オンライン可
    無料相談
    デジタル化
    診断チャート
    簡易診断

    デジタル化による
    コスト削減効果を算出