web-dev-qa-db-ja.com

モバイルブラウザのツールチップ

さらに情報を提供したい場合、現在、いくつかのHTMLのtitle属性を設定しています。

<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>

次に、CSSで：

.more_info {
  border-bottom: 1px dotted;
}

非常に優れた機能を発揮し、マウスを上に移動させるための視覚的なインジケータと、詳細情報が表示された小さなポップアップ。しかし、モバイルブラウザでは、そのツールチップは表示されません。 title属性は効果がないようです。モバイルブラウザでテキストに関する詳細情報を提供する適切な方法は何ですか？上記と同じですが、Javascriptを使用してクリックをリッスンし、ツールチップのようなダイアログを表示しますか？ネイティブのメカニズムはありますか？

mobilehtmlmobile-websitetooltiphtml5
46
at.

Javascriptを使用して、タイトルツールチップの動作を偽造できます。 title属性を持つ要素をクリック/タブすると、タイトルテキストを持つ子要素が追加されます。もう一度クリックすると削除されます。

Javascript（jQueryで実行）：

$("span[title]").click(function () {
  var $title = $(this).find(".title");
  if (!$title.length) {
    $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
  } else {
    $title.remove();
  }
});​

CSS：

.more_info {
  border-bottom: 1px dotted;
  position: relative;
}

.more_info .title {
  position: absolute;
  top: 20px;
  background: silver;
  padding: 4px;
  left: 0;
  white-space: nowrap;
}

デモ： http://jsfiddle.net/xaAN3/

26
flavaflo

ユーザーに提供する情報量に応じて、モーダルダイアログボックスがエレガントなソリューションになる場合があります。

具体的には、 qTip jQueryプラグインを試すことができます。このプラグインには、$.click()で起動される modal モードがあります。

qTip Modal tooltip

7
msanford

Flavafloの答えの少し精巧なバージョン：

  • Title属性から読み取るのではなく、HTMLを保持できるポップアップとして事前定義されたdivを使用します
  • マウスが使用されている場合、ロールオーバーで開く/閉じる
  • クリック（タッチスクリーン）で開き、開いているポップアップまたはドキュメント上の他の場所をクリックすると閉じます。

HTML：

  <span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>

CSS：

.more_info {
    border-bottom: 1px dotted #000;
  position: relative;
    cursor: pointer;
}

.more_info .popup {
    position: absolute;
    top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    left: 0;
    max-width: 240px;
    min-width: 180px;
    z-index: 100;
    display: none;
}

JavaScript/jQuery：

$(document).ready(function () {

    //init pop-ups
    $(".popup").attr("data-close", false);

    //click on pop-up opener
    //pop-up is expected to be a child of opener
    $(".more_info").click(function () {
        var $title = $(this).find(".popup");
        //open if not marked for closing
        if ($title.attr("data-close") === "false") {
            $title.show();
        }
        //reset popup         
        $title.attr("data-close", false);
    });

    //mark pop-up for closing if clicked on
    //close is initiated by document.mouseup, 
    //marker will stop opener from re-opening it
    $(".popup").click(function () {
        $(this).attr("data-close",true);
    });

    //hide all pop-ups
    $(document).mouseup(function () {
        $(".popup").hide();

    });

    //show on rollover if mouse is used
    $(".more_info").mouseenter(function () {
        var $title = $(this).find(".popup");
        $title.show();
    });

    //hide on roll-out
    $(".more_info").mouseleave(function () {
        var $title = $(this).find(".popup");
        $title.hide();
    });  

});

デモ https://jsfiddle.net/bgxC/yvs1awzk/

4
bgx

今日（2015年）多くの人々がモバイルブラウザーを使用しており、タイトルがモバイルブラウザーでまだ公開されていないことを考えると、意味のある情報を得るためにタイトルへの依存を非推奨にする時が来たのかもしれません。

重要な情報には決して使用すべきではありませんが、有用な情報については疑わしいものになっています。その情報が有用であり、半分のユーザーに表示できない場合は、ほぼすべてのユーザーに表示する別の方法を見つける必要があるためです。

静的なページの場合、おそらく関連するコントロールの近くに表示されるテキスト（細かい印刷でも）。サーバー生成ページの場合、ブラウザースニッフィングはモバイルブラウザーにのみ提供できます。クライアント側では、javascriptを使用して、バブリングを介してフォーカスイベントをトラップし、現在フォーカスされている要素の横に追加のテキストを表示できます。それは、占有される画面スペースを最小化しますが、多くの場合、コントロールにフォーカスを合わせることができるのは、すぐにそのアクションをアクティブにし、見つける能力をバイパスする方法でしかできないので、必ずしもあまり役に立ちませんそれを使用する前にそれについて！

ただし、モバイルデバイスでタイトル属性を表示することの難しさは、より普遍的な代替手段を必要とするため、その終miseにつながる可能性があります。モバイルは限られた画面スペースを占有することなく、そのような追加情報をオンデマンドで表示する方法を使用できるため、それは残念です。

W3cとモバイルブラウザのメーカーがずっと前にこの問題について何もしなかったことは奇妙に思えます。少なくとも、コントロールを長押しすると表示されるメニューの上部にタイトルテキストを表示できたはずです。

個人的には、右クリック/ロングタッチメニューの上部に配置して、タイムアウトしないようにし、すべてのブラウザで使用できるようにしたいです。

もう1つの方法は、脚注を作成することです。したがって、[n]タイプの上付き文字が、情報が必要な要素/テキストの隣に配置され、ページ下部のリストの説明テキストにリンクします。これらはそれぞれ、元のテキスト/要素に戻る同様の[n]タイプのリンクを持つことができます。こうすることで、ディスプレイをすっきりさせますが、簡単な双方向スワッピングを簡単な方法で提供します。場合によっては、少しのハイパーリンクの助けを借りた古い印刷メディアの方法が最適です。

Title属性は、パターンがinput要素のテキストと一致しない場合にテキストがポップアップするという点で、パターン属性のヘルプテキストを提供するために一部のブラウザーによってハイジャックされました。通常、正しい形式の例を提供します。

2
Patanjali

Title属性は、**モバイルマウスではサポートされていません**デスクトップマウスユーザーと同じツールチップを表示する方法** *（属性自体はもちろんマークアップでサポートされています）*。
基本的には、マウスを使用するデスクトップユーザー、キーボードのみのユーザーは使用できない、またはスクリーンリーダーのみです。

あなたが言ったようにあなたはjavascriptでほぼ同様を達成することができます。

2
Samuel M

答えてくれた@flavafloに感謝します。これはほとんどの場合に機能しますが、同じ段落で検索するタイトルが複数あり、1つが別のリンクへ開いた場合、開いていないリンクは最初のリンクから表示されます。これは、「ポップアップ」されたタイトルのz-indexを動的に変更することで解決できます。

_$("span[title]").click(function () {
  var $title = $(this).find(".title");
  if (!$title.length) {
    $(this).append('<span class="title">' + $(this).attr("title") + '</span>');
    $(this).css('z-index', 2);
  } else {
    $title.remove();
    $(this).css('z-index', 0);
  }
});​
_

また、_&#10;_（改行）をtitle = ''属性に追加することにより、ホバーオーバーディスプレイとクリックディスプレイのマルチラインを作成し、それをHTMLクリックディスプレイ用に_<br />_に変換できます。

_$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');
_
0
Eric Twose