kintone アプリのツールチップ(ふきだし)プラグインです。
項目ラベルにツールチップを表示します。
- 編集・詳細・一覧画面にツールチップを表示
- HTMLタグによる書式指定
- ツールチップの背景色を指定
- 表示対象のラベルの文字色・太さを指定
- 表示タイミング(クリック、ホバー)を指定
- 3ヶ国語(日中英)対応
- PC・モバイル対応
rex0220 storesで、販売中です。
※ Ver.11
・プラグイン設定画面のデザイン変更対応
・プラグイン設定に、「説明」設定機能を追加
ツールチップ表示例
ツールチップを hover(カーソルをラベルの上)モードで表示した例です。
ツールチップテーマ
ツールチップテーマ、ラベル文字色等を指定できます。
- ツールチップテーマ:orange、文字色:blue
- ツールチップテーマ:green、文字色:red
- ツールチップテーマ:blue、文字色:blue
- ツールチップテーマ:pink、文字色:gray
- アイコン表示例
モバイル表示
モバイル表示では、ラベルをクリックするとツールチップが表示されます。
プラグインの追加
- 「kintone システム管理 > プラグイン」で追加します。
- 「アプリの設定 > プラグイン」で、アプリに追加します。
プラグインの設定
基本設定タブ
- スタイル: ラベルまたはアイコンを選択。
- ラベル色、ラベルボールド(太字)、テーブルラベル色、テーブルボールド
- トリガー:hover (カーソルがラベルの上)、click(ラベルをクリック)
一覧画面では、指定に関係なく hover モードになります。 - ツールチップテーマ、フォントサイズ
項目タブ
- 対象アプリでツールチップを使用する項目を選択して、表示内容を設定します
- 必要に応じ、「多言語」をチェックして言語ごとの表示内容を指定します
- 「詳細」「一覧」をチェックして、各々のメッセージを有効にします
- 「一覧」をチェックして、一覧メッセージが未入力の場合は、詳細のメッセージを表示します
- フィルタ機能で、表示項目を絞れます
- グリッドのラベル欄をクリックすると、その項目順にソートされます
- 「保存する」をクリックします
編集方法
- ダブルクリックで編集モード
- 右下角をドラッグすると編集エリアを広げられます
- 改行を入力するとツールチップ表示時に<br>に置き換えられ、改行されます
タグ編集入力支援
編集エリア内で「?」を入力すると、指定可能なタグ入力支援一覧が表示されます。
タグ入力支援をクリックすると編集エリアにタグが展開されます。
- a : リンク
- a-new : kintone アプリレコード追加へのリンク
- bold : 太文字
- color : 文字色
- div : ブロック
- font : フォントの書式(文字色、太文字、サイズ)
- span : 文字色
- a-new : kintone アプリレコード追加へのリンクを指定した例
カーソルが「xxx」の位置になりますので、アプリ番号を指定します。
プラグイン設定のダウンロード
- プラグイン設定をダウンロードできます。
- 設定内容を変更している場合は、変更後の設定が対象です。
- ブラウザ IE については、プラグイン設定のダウンロードの動作対象外です。
プラグイン設定のアップロード
- プラグイン設定をアップロードできます。
- フィールドコードをキーにして、設定ファイルから設定します。
- ブラウザ IE については、プラグイン設定のアップロードの動作対象外です。
- プラグイン設定ファイル情報を確認して、設定します。
注意事項
- 既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。