ツールチップ プラグイン

入力フォームの各フィールドは、可能な限り分かりやすく、具体的にどのように入力してほしいのか明記されていることが望ましいです。

kintone にはそのための機能がいくつか用意されており、その中でもラベルフィールドはよく利用されるのではと思います。

ただ、kintone にはレイアウトに制約がいくつか存在し、全てのフィールドが縦・横自由な位置に配置できるわけではありません。

あまりに補足メッセージや注意点が多く記載されていると、かえって見づらく、入力しづらいフォームになってしまうこともあります。

フォームはすっきりさせたいけど、入力のヒントはできる限り表示させたい。

今回はそういった要望を実現するプラグインを用意しました。

ソースコードは全て Github に公開しており、無料で使用していただけます。

プラグインが提供する機能

ツールチップの表示

フィールドの右側にアイコンを追加し、そのアイコンにカーソルを合わせることで、設定したヒントを表示することができます。

アイコンは以下の画面に対応しています。

• レコード一覧画面
• レコード詳細画面
• レコード編集画面
• レコード新規作成画面

HTML 対応

HTML タグを含むヒントを表示することができます。

画像を表示する

HTML タグを使用することで、ツールチップに画像を表示することも可能です。

リンクを表示する

同様に、リンクを表示し、マニュアルや参考資料へのリンクを貼ることもできます。

ツールチップのデザイン

ツールチップは HTML を活用し柔軟なカスタマイズが可能ですが、タグを記述することなく、簡単に設定することもできます。

オプションとして、ツールチップの背景色の設定と、テキストの色の設定が可能です。

プラグインが活きるシーン

顧客情報の詳細入力

顧客情報は多くの会社で重要な情報ですが、入力する項目数が多いため、入力者がどのように入力すればよいのか迷うことがあります。

ツールチップを使用することで、入力者に対して、各項目の入力方法や注意点を表示することができます。

トラブル報告フォーム

トラブル報告フォームでは、トラブルの内容を詳細に記入してもらう必要がありますが、入力者がどのような情報を記入すればよいのか分からないことがあります。

ツールチップを使用することで、入力者に対して、トラブルの内容や報告方法を表示することができ、入力者がスムーズにトラブル報告を行うことができます。

プラグインのソースコード

当プラグインはオープンソースです。 プラグインがどういったファイルで構成されているのか、どのように実装されているのか、全てのプログラムを Github から確認することが可能です。

プラグインのソースコードを確認されたい方は、当ページトップの「ソースコードを確認する」ボタンからプラグインのリポジトリにアクセスすることができます。