# ツールチップガイドの開発

ツールチップは、アプリケーション内の特定の要素にマウスオーバーまたはクリックしたときに、コンテキスト情報を表示します。 ツールチップはガイドフローから独立しており、ワークフローを中断することなくユーザーが発見できるように設計されています。

## ツールチップステップの作成

Nexthink Applicationsで[ツールチップタイプのガイドを作成](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides)し、[Adopt Editorでガイドにアクセス](#accessing-adopt-editor-for-tooltips)した後：

1. **ステップを追加**を選択するか、\*\*+\*\*アイコンをクリックして新しいステップを作成します。
2. ページ上の要素を選択し、ツールチップに関連付けます。 ✔をクリックして確認します。 ツールチップ**プロパティ**を設定する際に、要素を再選択することができます。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-73fc539ef7842ae2c1170884ae87f1723aef7198%2Fimage%20(953).png?alt=media" alt=""><figcaption></figcaption></figure>

3. ギアアイコンをクリックしてツールチップステップの**プロパティ**にアクセスします：
   * [テキストとコンテンツを追加](#adding-text-and-content-to-tooltips)
   * [外観を定義する](#defining-tooltip-appearance)
   * [位置オプションを定義する](#defining-tooltip-positioning-options)
   * [表示とトリガーオプションを定義する](#defining-tooltip-display-and-trigger-options)

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-bf371a5c184d5a53c3d82eecbc721b9a0158e25c%2Fimage%20(954).png?alt=media" alt=""><figcaption></figcaption></figure>

## ツールチップステップにテキストとコンテンツを追加する

Adopt Editorから、ツールチップステップの**プロパティ**にアクセスし、**コンテンツ**タブを開いて、従業員に見えるコンテンツを追加します：

* **ツールチップコンテンツ**エディターを使用してテキストを書いてフォーマットします。
* オプションで、URLまたは[アセットライブラリ](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/managing-adoption-assets-with-the-asset-library)から画像を追加します。
* 必要に応じて、関連ページ、画像、オーディオまたはビデオへのリンクを追加します。

## ツールチップの外観を定義する

[Adopt Editor の左パネル](#understanding-adopt-editor-for-tooltips)から、ツールチップの**プロパティ**にアクセスし、**外観**タブを開きます。

切り替えボタンを使用してコンポーネントの表示を決定します：

* 従業員がツールチップを閉じることができるように**十字ボタン**（x）を含めます。
* ツールチップをiframeでラップするために**ステップカプセル化**を有効にします。 これにより、ツールチップをクリックしたときにメインページとの意図しないインタラクションを防ぎます。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-246f425b51acc5af9e89c9463ab31e4204214fe3%2FTootltipAppereance_01.png?alt=media" alt=""><figcaption></figcaption></figure>

## ツールチップの配置オプションを定義する

Adopt Editorの左パネルからツールチップの**プロパティ**にアクセスし、**位置**タブを開きます：

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-1e33b057b3d9c182db354c8cf9d831ada84c5a46%2Fimage%20(494).png?alt=media" alt=""><figcaption></figcaption></figure>

### **ツールチップの位置**

<details>

<summary>ターゲット要素</summary>

Webアプリケーションページでステップと関連付けられた要素を**プレビュー**します。 必要に応じて、要素を**再選択**します。 Adopt Editorでの[要素セレクタの使用](https://docs.nexthink.com/platform/ja/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor)に関するドキュメントを参照してください。

* システムがスペース制約のために希望する位置を表示できない場合、Adoptは時計回りの方向で最適な位置に配置します。

</details>

<details>

<summary>キーのページ</summary>

**一致を表示**をチェックし、またはリストからキーのページを選択することにより、**ターゲットのキーのページ**を選択します。**検索**バーを使用して名前で結果をフィルタリングすることもできます。

* あらかじめ定義されたキーページを使用すると、Nexthink Infinityで認識できる動的URLにツールチップを関連付けることができます。例： `https://impl.workday.com/*/d/home.htmld`
* 一致するキーのページがない場合は、[キーのページ](https://docs.nexthink.com/platform/ja/user-guide/applications/configuring-applications/configuring-web-applications/key-pages) ドキュメントを参考にしてください。
* 必要に応じて、**キーのページの選択を無視**し、**ナビゲーション**で静的URLを定義します。

</details>

<details>

<summary>要素の位置</summary>

必要に応じて、**要素セレクタ**（Nexthink Infinity Adoption設定でデフォルトで構成されています）を有効または無効にして、このステップに固有のものにします。

* 特定のテキストブロックをターゲットにする場合、**Element XPath** セレクタのオーバーライドを他の言語に[ローカライズ](https://docs.nexthink.com/platform/ja/user-guide/guide-creation-and-management-from-nexthink-applications/creating-guides#localizing-content)することができます。

{% hint style="warning" %}
Adopt Editorをiframeを含むアプリケーションで使用している場合、**一致を表示**オプションはターゲット要素のあるiframeの一致するキーのページを表示できません。

このような場合には、ターゲット要素を**再選択**して、一致するキーのページを表示します。
{% endhint %}

</details>

<details>

<summary>ユーザーがスクロールするときに位置計算の再計算を有効にする</summary>

メインページ以外にスクロールバーを持つ複数のコンテナがある場合には、**ユーザーがスクロールするときに位置計算の再計算を有効にします**。 一般的に、Adoptはツールチップと関連する要素に到達するためにメインページをスクロールしようとします。 このオプションを有効にし、`element ID`を指定してそのコンテナにスクロールを制限します。

</details>

<details>

<summary>ガイドのデフォルト</summary>

[Nexthink 採用設定](https://docs.nexthink.com/platform/ja/user-guide/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings#setting-guide-defaults)で利用できる**ガイドのデフォルト**を有効または無効にします。

* **記録されたクエリパラメータを無視**: ツールチップがクエリを含む特定のURLにナビゲートする場合、この設定を有効にしてクエリを無視し、`http://google.com/?query` の `/?` 以降を無視し、ベースURLのみを使用します。
* **要素がカバーされていないときにツールチップを表示**: Adoptは通常、関連する要素がモーダルウィンドウやダイアログに重なっている場合でもツールチップを表示します。 この設定を有効にすると、他の要素に重ならないときにのみツールチップが表示されるようになります。
* **要素を見るためにスクロールする**: この設定を有効にして、関連する要素が表示されるまで自動的にページをスクロールします。

{% hint style="info" %}
ツールチップの位置を選択された要素に対して定義するために、**向き**、**カスタムリージョン**、**z-index** のオプションを使用します。
{% endhint %}

</details>

### **ツールチップの配置**

関連する要素の位置に基づいて、ツールチップが表示される方向を決定するために**向き**を選択します。

* **自動**がデフォルトの設定です。 要素がページのトップにある場合は下から、そうでない場合は上からツールチップが表示されます。
* 表示方向を指定するために**上**、**右**、**下**、**左**を選択します。

### **Z-index**

Neixtink拡張がツールチップを表示するz-indexの起点を決定するために**Z-indexのソース**を選択します。

* **テーマ**はNexthinkのデフォルトのz-index値 `73999` を使用します。
* **要素**はページのフォーマットにより決定される関連する要素のz-index値を使用します。
* **手動**は**シャドウ**と**ツールチップ**のz-index値を定義することができます。 ツールチップが正しく表示されるために、シャドウを超えて少なくとも`1`以上であることを確認します。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-3b85f53231a676df8ffc9d7e74ccc90950eaf806%2Ftooltip_position_options.png?alt=media" alt=""><figcaption></figcaption></figure>

## ツールチップの表示とトリガーオプションを定義する

[採用エディタ左側のパネル](#understanding-adopt-editor-for-tooltips)から、ツールチップの**プロパティ**にアクセスし、**表示**タブを開きます。

* ツールチップのヒントアイコンを有効または無効にします。
* ツールチップが表示されるタイミングを指定するために**表示トリガー**を定義します: 開始時またはアクションの完了時。
  * **中スポット/中解除**トリガーはページ上の表示されている要素に対して機能し、**現出/非現出**は存在するが、CSSで`hidden`に設定されているため表示されない要素に使用します。
  * **viewport内でのスポット**は、要素が従業員の画面に表示されたときにツールチップをトリガーします。
  * **選択/値を入力して進む**は、検索バーへの単語の入力やドロップダウンからのオプションの選択などの入力フィールドのインタラクションに対してツールチップをトリガーします。
  * **要素がフォーカスを失う**は、フォーカスされたページ要素からクリックして外れたときにツールチップをトリガーします。 例えば、検索バーから入力を無効にするためにクリックしてフォーカスを外します。

<figure><img src="https://3549141153-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeLm8O7QKZDn6z806e7Sv%2Fuploads%2Fgit-blob-86c1888abb9d791fd8041f4228d56e70c31a6d51%2FTOOLtipsDIsplayTab_01.png?alt=media" alt=""><figcaption></figcaption></figure>