Ribbit's works

【プラグイン無料公開】ツールチップを実装し、フィールドにヒントを表示するプラグインを開発しました

#kintone#JavaScript#TypeScript公開 2022-07-14
記事のトップ画像

tooltip detail

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

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

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

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

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

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

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

公開しているkintoneプラグイン一覧ページよりダウンロード可能です。

機能デモ - 操作画面

レコード一覧、レコード詳細、レコード編集それぞれについて、フィールドの右側にアイコンが追加されます。

アイコンにカーソルを合わせることで、設定したヒントが表示されます。

レコード一覧画面

tooltip index

レコード詳細・編集画面

tooltip detail

機能デモ - プラグイン設定画面

tooltip config

設定画面は極力シンプルにしました。

ヒントを表示するフィールドと、表示するヒントのみ設定可能です。

公開しているkintoneプラグイン一覧ページよりダウンロード可能です。