rex0220 ツールチッププラグイン

kintone アプリのツールチップ（ふきだし）プラグインです。
項目ラベルにツールチップを表示します。

- 編集・詳細・一覧画面にツールチップを表示
- HTMLタグによる書式指定
- ツールチップの背景色を指定
- 表示対象のラベルの文字色・太さを指定
- 表示タイミング（クリック、ホバー）を指定
- 3ヶ国語（日中英）対応
- PC・モバイル対応

[rex0220 stores](https://rex0220.stores.jp)で、販売中です。

※ Ver.12
・プラグイン設定でスタイルに「label」指定時、編集画面でテーブル項目の項目幅が短くなる不具合対応

# ツールチップ表示例

ツールチップを hover（カーソルをラベルの上）モードで表示した例です。


![2018-06-03_20h39_27.gif](https://qiita-image-store.s3.amazonaws.com/0/100572/6e00f191-c725-6e99-1d95-0907f3ebb413.gif)

# ツールチップテーマ

ツールチップテーマ、ラベル文字色等を指定できます。

- ツールチップテーマ：orange、文字色：blue

<img width="745" alt="2018-06-03_17h13_54.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/5db936d8-2299-e86d-61d8-99a94a370f93.png">

- ツールチップテーマ：green、文字色：red

<img width="743" alt="2018-06-03_17h28_14.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/e8ce5962-12b5-e5f3-0000-e8d80875e13f.png">

- ツールチップテーマ：blue、文字色：blue

<img width="742" alt="2018-06-03_17h31_27.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/42fe1967-3562-ea61-0fe8-d7fe5f3c3b2d.png">

- ツールチップテーマ：pink、文字色：gray

<img width="743" alt="2018-06-03_17h33_17.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/8f29a039-3772-8f59-6723-179fb0a04661.png">

- アイコン表示例

![2022-06-25_21h51_00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/c4503fe6-70d1-ce43-3c92-4c87d403bf23.png)


# モバイル表示

モバイル表示では、ラベルをクリックするとツールチップが表示されます。

![2020-12-05_16h07_59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/1f8d2343-3902-5e23-da4c-5cf35342bf5e.png)

モバイルアイコン表示例
![2022-06-25_21h52_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/891a28eb-9364-141a-581e-cafa17700269.png)


# プラグインの追加

- 「kintone システム管理 > プラグイン」で追加します。
- 「アプリの設定 > プラグイン」で、アプリに追加します。

<img width="1019" alt="2018-06-03_18h27_05.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/8cee8b57-987e-006d-7314-747643146a74.png">

# プラグインの設定

## 基本設定タブ

- スタイル：　ラベルまたはアイコンを選択。
- ラベル色、ラベルボールド（太字）、テーブルラベル色、テーブルボールド
- トリガー：hover (カーソルがラベルの上)、click(ラベルをクリック)<br>
一覧画面では、指定に関係なく hover モードになります。
- ツールチップテーマ、フォントサイズ

![2022-06-25_21h48_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/e579554b-0b37-c178-062f-72b904811a59.png)

## 項目タブ

- 対象アプリでツールチップを使用する項目を選択して、表示内容を設定します
- 必要に応じ、「多言語」をチェックして言語ごとの表示内容を指定します
- 「詳細」「一覧」をチェックして、各々のメッセージを有効にします
- 「一覧」をチェックして、一覧メッセージが未入力の場合は、詳細のメッセージを表示します
- フィルタ機能で、表示項目を絞れます
- グリッドのラベル欄をクリックすると、その項目順にソートされます
- 「保存する」をクリックします

![2024-04-13_17h21_17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/182abe51-5061-ff10-8fcf-201833e39962.png)


## 編集方法

- ダブルクリックで編集モード
- 右下角をドラッグすると編集エリアを広げられます
- 改行を入力するとツールチップ表示時に\<br\>に置き換えられ、改行されます

![2024-04-13_17h25_46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100572/9015ff6a-da40-e458-3c04-6182b25b4010.png)

## タグ編集入力支援

編集エリア内で「?」を入力すると、指定可能なタグ入力支援一覧が表示されます。
タグ入力支援をクリックすると編集エリアにタグが展開されます。

- a : リンク
- a-new : kintone アプリレコード追加へのリンク
- bold : 太文字
- color : 文字色
- div : ブロック
- font : フォントの書式（文字色、太文字、サイズ）
- span : 文字色

<img width="945" alt="2018-06-03_20h21_00.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/163fc71f-0f78-ae2b-9683-1de9c08ac3f2.png">

- a-new : kintone アプリレコード追加へのリンクを指定した例

カーソルが「xxx」の位置になりますので、アプリ番号を指定します。

<img width="953" alt="2018-06-03_20h24_15.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/9a87bf08-6742-a4cc-7a0e-fb08d4fb04f6.png">


# プラグイン設定のダウンロード

- プラグイン設定をダウンロードできます。
- 設定内容を変更している場合は、変更後の設定が対象です。
- ブラウザ IE については、プラグイン設定のダウンロードの動作対象外です。

<img width="945" alt="2018-06-03_19h04_02.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/de2236fb-4b0d-597e-5573-b72605dcd152.png">

# プラグイン設定のアップロード

- プラグイン設定をアップロードできます。
- フィールドコードをキーにして、設定ファイルから設定します。
- ブラウザ IE については、プラグイン設定のアップロードの動作対象外です。

<img width="946" alt="2018-06-03_19h06_54.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/17581afd-8560-4876-3c35-621a88e3c8c6.png">

- プラグイン設定ファイル情報を確認して、設定します。

<img width="946" alt="2018-06-03_19h10_11.png" src="https://qiita-image-store.s3.amazonaws.com/0/100572/ca24f71e-8602-9edf-0a4b-6fa3f5b7b7b3.png">

# 注意事項
- 既に、JavaScript によるカスタマイズを行っているアプリの場合、処理が競合して、エラーになる場合があります。その場合は、該当するアプリでプラグインの使用を中止してください。