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