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

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

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

Nexthink Applicationsでツールチップタイプのガイドを作成し、Adopt Editorでガイドにアクセスした後：

1. ステップを追加を選択するか、**+**アイコンをクリックして新しいステップを作成します。

2. ページ上の要素を選択し、ツールチップに関連付けます。 ✔をクリックして確認します。 ツールチップのプロパティを設定するときに、要素を再選択することができます。

1. 歯車アイコンをクリックして、ツールチップステップのプロパティにアクセスします。

   • テキストとコンテンツの追加

   • 外観の定義

   • 位置オプションの定義

   • 表示およびトリガー オプションの定義

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

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

• ツールチップコンテンツエディターを使用してテキストを書いてフォーマットします。

• 必要に応じて、画像を追加します。

• 必要に応じて、関連ページ、画像、オーディオまたはビデオへのリンクを追加します。

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

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

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

• 従業員がツールチップを閉じることができるように十字ボタン（x）を含めます。

• ツールチップをiframeでラップするためにステップカプセル化を有効にします。 これにより、ツールチップをクリックしたときにメインページとの意図しないインタラクションを防ぎます。

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

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

ツールチップの位置

ターゲット要素

Webアプリケーションページでステップと関連付けられた要素をプレビューします。 必要に応じて、要素を再選択します。 Adopt Editorでの要素セレクタの使用に関するドキュメントを参照してください。

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

キーのページ

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

• あらかじめ定義されたキーページを使用すると、Nexthink Infinityで認識できる動的URLにツールチップを関連付けることができます。例： https://impl.workday.com/*/d/home.htmld

• 一致するキーのページがない場合は、キーのページ ドキュメントを参考にしてください。

• 必要に応じて、キーのページの選択を無視し、ナビゲーションで静的URLを定義します。

要素の位置

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

• 特定のテキストブロックをターゲットにする場合、Element XPath セレクタのオーバーライドを他の言語にローカライズすることができます。

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

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

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

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

ガイドのデフォルト

Nexthink 採用設定で利用できるガイドのデフォルトを有効または無効にします。

• 記録されたクエリパラメータを無視: ツールチップがクエリを含む特定のURLにナビゲートする場合、この設定を有効にしてクエリを無視し、http://google.com/?query の /? 以降を無視し、ベースURLのみを使用します。

• 要素がカバーされていないときにツールチップを表示: Adoptは通常、関連する要素がモーダルウィンドウやダイアログに重なっている場合でもツールチップを表示します。 この設定を有効にすると、他の要素に重ならないときにのみツールチップが表示されるようになります。

• 要素を見るためにスクロールする: この設定を有効にして、関連する要素が表示されるまで自動的にページをスクロールします。

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

ツールチップの配置

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

• 自動がデフォルトの設定です。 要素がページのトップにある場合は下から、そうでない場合は上からツールチップが表示されます。

• 表示方向を指定するために上、右、下、左を選択します。

Z-index

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

• テーマはNexthinkのデフォルトのz-index値 73999 を使用します。

• 要素はページのフォーマットにより決定される関連する要素のz-index値を使用します。

• 手動はシャドウとツールチップのz-index値を定義することができます。 ツールチップが正しく表示されるために、シャドウを超えて少なくとも1以上であることを確認します。

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

採用エディタ左側のパネルから、ツールチップのプロパティにアクセスし、表示タブを開きます。

• ツールチップのヒントアイコンを有効または無効にします。

• ツールチップが表示されるタイミングを指定するために表示トリガーを定義します: 開始時またはアクションの完了時。

  • 中スポット/中解除トリガーはページ上の表示されている要素に対して機能し、現出/非現出は存在するが、CSSでhiddenに設定されているため表示されない要素に使用します。

  • viewport内でのスポットは、要素が従業員の画面に表示されたときにツールチップをトリガーします。

  • 選択/値を入力して進むは、検索バーへの単語の入力やドロップダウンからのオプションの選択などの入力フィールドのインタラクションに対してツールチップをトリガーします。

  • 要素がフォーカスを失うは、フォーカスされたページ要素からクリックして外れたときにツールチップをトリガーします。 例えば、検索バーから入力を無効にするためにクリックしてフォーカスを外します。