モバイルWebサイトのツールチップのベストプラクティスは何ですか？
モバイルWebサイトのツールチップのベストプラクティスは何ですか？私は、顧客のアカウント用のモバイルバージョンのWebサイトを設計しています（顧客のアカウントの最新の請求書と設定を確認できます）。デスクトップサイトには、用語を説明するためのツールチップが満載です。たとえば、顧客の設定を編集するページには、各設定のツールチップがあります（各設定をチェックすることもできます）。お客様の請求ページもあります。会計条件にはツールチップがあります。
ツールチップ（各アイテムの横にある「i」アイコン。ただし、各「i」はかなり小さくする必要があります。実際には使用できません）、またはツールチップが必要な各ページの上部または下部にある1つのツールチップボタンを検討しています。または、ページの下部に固定されたツールチップ。
ツールチップの数を最小限に抑える必要があると思います。さらに、それらをモバイルデバイスで表示するためのベストプラクティス（ユーザビリティの面）が何であるかはわかりません。
表示方法
私はあなたのUIをiアイコンや疑問符で分散させません。代わりに、点線の下線を使用して、ユーザーが作業と対話できることを明確にし、リンクとは別に設定します。
対話する方法
カーソルデバイスでは、マウスアウト時にツールチップが再び非表示になることに注意してください。タッチデバイスではこれを実行できないため、ダブルクリックでツールチップを非表示にできることを確認してください（最初のクリックでツールチップが開き、2番目でツールチップが閉じます）。 Zurb's Foundation Framework が提供するように、これを説明するために、Niceメッセージを追加することもできます。
私が取り組んでいるプロジェクトには、段階的な開示に関する同様の問題があります。私たちのウェブサイトには、モバイルでは突然役に立たない情報アイコンが散らばっています。私は破線の下線オプションが好きですが、一度読んだ情報バブルを閉じる方法の問題を提示します。
スワイプ、タップ、またはドラッグの基本的なモバイルジェスチャーで、より多くの情報レイヤーを公開する方法を考えてください。下記参照：
各アイテムの横に「i」を追加すると、モバイルインターフェースが「i」の海になります。ツールチップをテキスト自体に直接適用すると、スペースを節約できるだけでなく、使いやすくなります。
デモリンク- http://osvaldas.info/examples/elegant-css-and-jquery-tooltip-sensitive-mobile-friendly/
最近Androidで正常に動作することを確認しました（アイスクリームサンドイッチ）
これはアイコンのサイズに依存します。たとえば、これらのボタンが大きい場合、ユーザーがサイトを線形（左から右または上から下）で使用する場合は、aboutページに似たものを実装できます。 stackexchangeの（参照： https://ux.stackexchange.com/about ）ここで、ユーザーがヒントを下にスクロールすると、別の方法として、YouTubeが新しい「ガイド」で行ったようなものを実装することができますボタンをクリックすると、ユーザーが初めてサイトにアクセスしたときに、ボタンの横にメッセージの吹き出しが付いたJavaScriptガイド付きのチュートリアルが行われ、[OK]をクリックすると、再び表示されません。ウェブサイト、サイズ、ユーザーなどについてより明確にすることは非常に役立ち、私の答えを改善し、さらに詳細に進むことができます。
Webサイトがデスクトップからモバイルに単純に移植されているようです。デスクトップのウェブサイトをモバイルで機能させるのではなく、ユーザーがモバイルでタスクを実行できるように、各ページを完全に再設計する必要があります。