title詳細情報を提供したい場合は、現在いくつかの HTML の属性を設定しています。
<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 を使用してクリックをリッスンし、ツールチップのようなダイアログを表示しますか? ネイティブメカニズムはありますか？
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;
}
flavaflo の回答のもう少し精巧なバージョン:
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();
});
});
ユーザーに提供する情報の量によっては、モーダル ダイアログ ボックスが洗練されたソリューションになる場合があります。
具体的には、モーダルモードがオンになっているqTip jQuery プラグインを試すことができます。$.click()
@cimmanon が述べspan[title]:hover:after { content: attr(title) }たように: タッチ スクリーン デバイスに関する基本的なツールチップを提供します。残念ながら、これには、タッチ スクリーン デバイスのデフォルトの ui 動作が、非リンク/uicontrol が押されたときにテキストを選択するという問題があります。
追加できる選択問題を解決するためにspan[title] > * { user-select: none} span[title]:hover > * { user-select: auto }
完全なソリューションでは、他のいくつかの手法を使用できます。
position: absolute background、などを追加してborder、box-shadowツールチップのように見せます。touchedユーザーがタッチ イベントを使用するときに、(js を介して)クラスを body に追加します。その後、body.touched [title]:hover ...デスクトップユーザーに影響を与えることなく実行できますdocument.body.addEventListener('touchstart', function() {
document.body.classList.add('touched');
});[title] {
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
border-radius:2px;
position: relative;
}
body.touched [title] > * {
user-select: none;
}
body.touched [title]:hover > * {
user-select: auto
}
body.touched [title]:hover:after {
position: absolute;
top: 100%;
right: -10%;
content: attr(title);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: white;
box-shadow: 1px 1px 3px;
padding: 0.3em;
z-index: 1;
}<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>title 属性は、どのモバイル ブラウザでもサポートされていません **デスクトップ マウス ユーザーと同じようにツールチップを表示するという意味で** *(もちろん、属性自体はマークアップでサポートされています)*。
基本的には、マウスを使用するデスクトップユーザー、キーボードのみのユーザーは使用できません、またはスクリーンリーダーのみを対象としています。
あなたが言ったように、JavaScriptでほぼ同じことを達成できます。