ウェブサイトはそれぞれ異なるため、エンドusersに最適な体験を提供できるように複数のレイアウト機能を追加しました。これにより、ツールチップがアプリケーションに自然に馴染み、設計したユーザー体験を妨げません。
オーバーレイレイアウトと埋め込みレイアウト
レイアウトを選ぶ際は、まずツールチップがウェブページにどのように挿入されるかを考慮する必要があります。
これは次の2つのレイアウトオプションのいずれかを選択することで行えます:
オーバーレイ - ページ上の既存要素の上にツールチップを重ねて表示します。
埋め込み - インラインで配置され、ページの要素を移動してスペースを確保します。
ツールチップの配置
選択した配置により、ツールチップが選択した要素に対してどのように位置決めされるかが決まり、ツールチップの表示位置をより細かく制御できます。
選べる配置オプションは3つあります:
要素内のテキスト - 要素内にテキストがある場合、そのテキストに合わせて配置します。
要素内 - デフォルトで要素の右側に配置されます。
要素の横 - デフォルトで要素の右外側に配置されます。
ツールチップの配置を左、右、上、下、中央に移動するオプションでさらに調整できます。デフォルト位置から移動したい場合にこれらのコントロールを使用してください。
オフセット
最終調整として、オフセットコントロールでツールチップを左右や上下に移動できます。これは、ツールチップで強調したい要素に近づけたり離したりしたい場合に特に便利です。
ツールチップの上オフセットと左オフセットはそれぞれ-1000から1000ピクセルの範囲内で設定する必要があります。どちらかのオフセットがこの範囲外の場合、ツールチップの保存に失敗し、ツールチップビルダーは具体的なメッセージなしの一般的な保存エラーバナーを表示することがあります。保存失敗を修正するには、両方のオフセットを-1000から1000ピクセルの範囲内に変更してから再度保存してください。
ツールチップの位置が正しく設定できない場合の対処法
ツールチップの位置設定にまだ問題がある場合、考慮すべきいくつかの要因があります:
製品に固定幅の要素があるか - 選択した要素に開発者が固定幅を適用している可能性があります。この場合、ツールチップの埋め込みが期待通りに表示されないことがあります。開発チームと相談してウェブページのHTMLとCSSを確認してください。
製品が動的に生成されたクラスを使用しているか - ツールチップビルダーでは正常に見えても、ライブ環境でプレビューやテストすると期待通りに表示されないことがあります。この場合、動的コンテンツがページのレイアウトを変えてツールチップの位置が予期せぬ場所に移動していることがよくあります。
これらの問題はCSSセレクターを手動で選択することでトラブルシューティングできます。
ご質問はありますか？
ツールチップの編集についてさらに質問があれば、Messengerでお気軽にチャットしてください。お手伝いします。