ツールチップは、製品内で顧客を教育し関与させるための非妨害的で文脈に沿った体験を提供し、より速い導入を促進します。新機能に注目を集めたり、Help CenterのArticleを表示したり、Product Tourを開始したりする際に最適です。
ツールチップの作成は迅速かつ簡単で、コードは不要です。始め方は以下の通りです：
ツールチップのデザイン
まず、メインメニューからOutboundに移動し、右上の＋ 新しいメッセージをクリックします。
次に、コンテンツタイプとしてツールチップを選択します。
左のサイドバーからこのコンテンツタイプを選んで、既成のテンプレートから始めることもできます。
注意：
ツールチップはデスクトップのウェブアプリ専用に設計されており、ネイティブモバイルアプリではサポートされていません。モバイルアプリで顧客を教育・関与させるには、Mobile Carouselsをご利用ください。
同じグループに追加することで、複数のツールチップを一度に追加できます。
これらは同じオーディエンスターゲティング、スケジューリング、目標が適用されます。新規顧客向けのオンボーディングツールチップをまとめたり、製品の特に複雑な部分をサポートする教育用ツールチップをグループ化するのに最適です。
1グループあたり100個、合計50グループまでツールチップを作成できます。
次に、ツールチップに短くてキャッチーなタイトルを付けます。例えば、新機能を発表する場合は「Feature launch」と名付けることができます：
ツールチップを追加するサイトを選択
ツールチップのデザインを始めるには、「Add tooltips」をクリックします：
新しいウィンドウが開きます。ここでツールチップを追加したいウェブサイトを入力します：
このURLは適切なウェブサイトを選択するためのもので、顧客にツールチップを表示する対象URLではありません。ページとオーディエンスのターゲティングルールは後のステップで選択できます。
URLを追加したら、「Open website」をクリックします。
ツールチップを追加する場所を選択
このツールチップが別のページ用の場合は、ここから別のページに移動できます。
「Add tooltip」をクリックして、このページでツールチップのデザインを開始します：
ツールチップを配置したいページの要素を選択します：
ツールチップにコンテンツを追加
スタイライズされたテキストを使い、リンク、画像、動画、コード、箇条書きや番号付きリストを追加できます。
サポートされている画像・動画形式はPNG、JPG、JPEG、GIF、MP4です。
Smart Linksを使って、すでにIntercomで作成したコンテンツを検索できます。例えば、Help CenterのArticleへのSmart Linkを追加して詳細情報を提供したり、このツールチップから開始したいProduct Tourを追加したりできます：
注意：
Smart LinksはIntercomで作成した公開済みのコンテンツのみを検索し、そのコンテンツに設定されたターゲティングルールは無視します。
Smart Linkでトリガーされたコンテンツは、エディターでツールチップをプレビューしているときには配信されません。
ツールチップのスタイル設定
アイコン - ページの要素の隣にアイコンを表示したい場合に選択します。
アイコンなし - 顧客が要素にホバーしたときにコンテンツがシームレスに表示されるようにしたい場合に選択します。
ラベル - 製品の機能に「New」や「Beta」などのラベルを要素の隣に追加したい場合に選択します。ラベルは16文字以内です。
アイコンタイプ - 新機能に注目を集めるビーコンなど、表示したいアイコンの種類を選択します。
アイコンの色 - ブランドに合わせたり、ページ上で目立たせるために色をカスタマイズします。
コンテンツ表示タイミング - 顧客がホバーしたときやクリックしたときなど、ツールチップがコンテンツを表示するタイミングを決めます。
アニメーションビーコン - 顧客が操作するまでツールチップがゆっくり点滅し、その後は静止します。
ここで追加したすべてのツールチップの背景色とテキストを設定できます。“Group settings”から管理してください。
ツールチップに最適なレイアウトを選択
これらのコントロールを使って、ツールチップを正確に配置または移動できます。以下のオプションを試してみてください：
オーバーレイ - このツールチップは要素の上に浮かびます（Messengerのように）。
埋め込み - このツールチップはHTMLの行内にレンダリングされ、ページのレイアウトを調整できます。
整列 - ツールチップを要素内のテキストに合わせるか、要素の横や隣に配置します。左、右、上、下、中央の位置調整も可能です。
オフセット - ピクセル単位でツールチップの余白を微調整して、さらに正確に配置します。
配置設定
「配置」をクリックして、ツールチップをサイト全体（例：ヘッダーやフッター）に表示するか、特定のページ（例：選択したページのみ）に表示するかを決めます。
ツールチップを表示するページを制御するには、「特定のページ」を選択し、「＋新しいルールを追加」をクリックします：
次に、ツールチップを表示するページのURLを定義します。デフォルトでは最初に選択したウェブサイトのURLですが、このルールを編集してサイト内の任意のページを選択できます：
ツールチップを配置する要素があるページを選択してください。
「含む」を使って、ページのグループやユーザーIDなどのユニークなパラメーターを含むページを柔軟にターゲティングできます。例えば、「project」を含むページURLを選択して、顧客がプロジェクトに取り組んでいるときにターゲットにすることができます。
適切なページをターゲットにするために、必要なだけページURLルールを追加してください。
アプリやサイトからURLをコピー＆ペーストするのが良いでしょう。ブラウザのアドレスバーに隠れた文字（末尾のスラッシュなど）も正確にキャッチできます。
要素のマッチング
ここでは、CSSセレクターを使ってツールチップを配置する要素を変更できます。また、ページ内の特定のテキストにツールチップを配置したい場合は、「By Text」でそのテキストを含む正確な要素を検索してみてください。
「By Text」で要素をマッチングすると、そのテキストを含むページ内の最初の要素が見つかります。
適切な要素を選択するのが難しい場合は、CSSセレクターを手動で選択する方法を試してください。
ツールチップの配置が完了したら、「完了」をクリックしてください。
これで、このグループに同じルールとスケジュールが適用されるツールチップをさらに追加できます。
異なるルールやスケジュールのツールチップを作成したい場合は、これを保存してから新しいツールチップをデザインしてください。
頻度と背景色の管理：
これらのツールチップの表示頻度を選択し、「Group settings」で一貫した背景色を設定します：
頻度：
これらのツールチップがオーディエンスルールに合致するたびに表示し続けるか、エンゲージメントがあるまで表示してその後消えるかを選択します。機能発表や認知向上に最適です。
頻度はここで追加したすべてのツールチップに適用され、個別のツールチップには設定できません。
ツールチップのエンゲージメントはブラウザのクッキーで追跡され、ユーザーアカウントでは追跡されません。したがって、usersが以下の操作を行うと、以前にエンゲージしたツールチップが再度表示されます：
別のブラウザやデバイスを使用する
キャッシュとクッキーをクリアする
シークレットウィンドウでログインする
背景色：
ここで追加したすべてのツールチップの背景色とテキストのHEXカラーを設定できます。製品のデザインガイドラインに合わせる必要があるツールチップに最適です。
グループ設定の管理が完了したら、「保存して閉じる」をクリックします。
ツールチップグループの編集
ツールチップグループを編集しているとき、下部ツールバーで以下が確認できます：
グループに含まれるすべてのツールチップ。
ツールチップのタグ付け方法 - CSSセレクターかテキスト要素か
ツールチップの表示場所 - サイト全体か特定のページか
ツールチップが現在のページにあるかどうか。
現在のページにないツールチップを編集すると、ページ中央にツールチップが浮かび、バナーエラーが表示されます。
これは、個々のツールチップの異なる設定を表示するツールチップグループの例です。
ライブ環境でテストする
ツールチップを顧客に公開する前に、以下の方法でテストすることをお勧めします：
1. 新規ユーザーとしてテスト
新規users向けにツールチップを追加した場合は、製品に新規登録して実際の新規ユーザーとしてツールチップをテストしてください。これにより、既存データなしで製品が完全に新しい状態でツールチップが機能することを確認できます。
2. すべての異なる製品権限でテスト
製品に基本、管理者、スーパ管理者など異なる権限レベルがある場合は、それぞれの権限レベルのusersとしてツールチップをテストしてください。これにより、すべてのタイプのusersに対してツールチップが機能し、すべてのusersがアクセスできるページにツールチップが追加されていることを確認できます。
3. 製品コンテンツの有無でツールチップが機能するかテスト
製品がユーザー生成コンテンツで満たされる場合でも空の場合でも、ツールチップが機能することを確認してください。空の状態とコンテンツがある状態の両方をテストしてください。
オーディエンスターゲティングルールを使って、自分やチームメンバーだけがツールチップをプレビューして正常に動作しているか確認できます。例えば、「Email contains examply」のusersを選択できます：
次に、ツールチップを公開して追加したウェブページにアクセスし、動作を確認します：
トラブルシューティング
ツールチップを公開しても表示されない場合は、以下を確認してください：
配置設定で正しいページが選択されていること。
ウェブページのURLが変更されていないこと。
動的要素がページのレイアウトを変更していないこと。修正方法はこちら。
ツールチップが表示されているが正しい場所でない場合は、レイアウトと位置を編集してください。
「By Text」で要素マッチングし、「配置設定」で「サイト全体」を選択している場合、そのテキストがあるページすべてでマッチする可能性があります。このツールチップにはCSSセレクターを使って要素マッチングすることをお勧めします。
注意： シングルページアプリケーション（SPA）を使用している場合、IntercomはMessengerが最初に読み込まれたときのみTooltipsをチェックします。これにより、ルート変更後（URLが完全にリロードされずに変わる場合）にTooltipsの表示が不安定になることがあります。
サポートチームは、URL変更時に毎回Tooltipsを再評価するワークスペース設定を有効にできます。SPAでの正しい表示を確保したい場合は、お問い合わせください。