Подсказки для мобильных браузеров

Ответ 1

Вы можете подделать поведение подсказки заголовка с помощью Javascript. Когда вы нажимаете /tab на элементе с атрибутом 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/

Ответ 2

В зависимости от того, сколько информации вы хотите предоставить пользователю, модальное диалоговое окно может быть изящным решением.

В частности, вы можете попробовать qTip плагин jQuery, в котором есть modal включен $.click():

Ответ 3

Немного более продуманная версия ответа флавафло:

• Использует предопределенный div как всплывающее окно, которое может содержать HTML, а не читать атрибут title
• Открывается/закрывается при опрокидывании, если используется мышь
• Открывается при нажатии (сенсорный экран) и закрывается при щелчке по открытому всплывающему окну или в другом месте документа.

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

Как отметил @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), когда пользователь использует какое-либо событие touch. Затем вы можете сделать 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 your tooltip">tooltip</span></div>

Ответ 5

Атрибут title не поддерживается в любых мобильных браузерах ** таким образом, чтобы он отображал всплывающую подсказку так же, как и пользователям настольных компьютеров ** * (сам атрибут поддерживается в разметке) *.
Это только в основном для пользователей настольных компьютеров с помощью мыши, только пользователи, использующие клавиатуру, не могут использовать ее, либо на экране.

Вы можете достичь почти аналогичного с javascript, как вы сказали.

Ответ 6

Учитывая, что в настоящее время многие люди (2015 г.) используют мобильные браузеры, а заголовок до сих пор не нашел формы распространения в мобильных браузерах, возможно, пришло время отказаться от использования заголовка для получения значимой информации.

Он никогда не должен использоваться для критической информации, но теперь он становится сомнительным для полезной информации, потому что, если эта информация полезна и не может быть показана половине пользователей, тогда необходимо найти другой способ показать ее почти всем пользователям.

Для статических страниц, возможно, какой-то видимый текст рядом с соответствующим элементом управления, даже в виде мелкого шрифта. Для страниц, генерируемых сервером, сниффер браузера может обеспечить это только для мобильных браузеров. На стороне клиента javascript может использоваться для перехвата события фокуса с помощью всплывающих подсказок, чтобы показать дополнительный текст рядом с текущим сфокусированным элементом. Это сведет к минимуму занимаемое пространство экрана, но не обязательно будет полезным, поскольку во многих случаях привлечение внимания к элементу управления может быть сделано только таким способом, который немедленно активирует его действие, минуя возможность выяснить об этом, прежде чем использовать его!

В целом, похоже, что трудности с отображением атрибута title на мобильных устройствах могут привести к его упадку, главным образом из-за необходимости использования более универсальной альтернативы. Это жаль, потому что мобильные устройства могут использовать способ показывать такую дополнительную информацию по требованию, не занимая ограниченное пространство экрана.

Кажется странным, что производители мобильных браузеров и w3c давно ничего не делали по этому поводу. По крайней мере, они могли бы отображать текст заголовка в верхней части меню, которое появляется при длительном нажатии на элемент управления.

Лично мне бы хотелось, чтобы оно было помещено в верхнюю часть меню, вызываемого правой кнопкой мыши/длинным касанием, поскольку оно не будет иметь тайм-аут и будет доступно во всех браузерах.

Другой альтернативой является создание сносок, поэтому верхний индекс типа [n] помещается рядом с элементом/текстом, нуждающимся в дополнительной информации, со ссылкой на пояснительный текст в списке внизу страницы. Каждый из них может иметь аналогичную ссылку [n] типа на исходный текст/элемент. Таким образом, дисплей не загроможден, но легко и просто переключается в двух направлениях. Иногда, старые способы печатных СМИ, с небольшой помощью гиперссылки, являются лучшими.

Атрибут title был взломан некоторыми браузерами для предоставления текста справки для атрибута pattern, поскольку его текст всплывает, если шаблон не соответствует тексту в элементе input. Как правило, это предоставить примеры правильного формата.

Ответ 7

Спасибо @flavaflo за ответ. В большинстве случаев это работает, но если в одном и том же абзаце есть несколько заголовков для поиска, и один открывается по ссылке на другой, неоткрытая ссылка показывается через первый. Это может быть решено путем динамического изменения z-индекса заголовка, который "всплыл":

$("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);
  }
});​

Кроме того, вы можете сделать так, чтобы при наведении указателя мыши на отображение надписей и многострочном отображении кликов добавлялось 
 (перевод строки) в атрибут title= '', а затем преобразуйте его в <br/> для отображения html-клика:

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