Всплывающие подсказки для мобильных браузеров

Вы можете имитировать поведение всплывающей подсказки заголовка с помощью 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;
}

Демо:

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

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

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

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

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

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

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

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

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

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

Немного более усложненный вариант flavaflo'ы ответа:

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

HTML-код:

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

Усс:

.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();
    });  

});

Демо здесь

Как @cimmanon отметил: пядь[название]:Ховер:после { содержание: привлекательность(название) } дает вам примитивную подсказку на устройствах с сенсорным экраном. К сожалению, это проблемы, где поведение по умолчанию для пользовательского интерфейса на сенсорном экране устройства, чтобы выбрать текст для любого номера-ссылка/элементов графического интерфейса нажата.

Решить проблему выбора можно добавить пядь[название] > * { пользователя-выберите: нет} промежутка[название]:наведите > * { пользователя-выберите: авто }

Полное решение могут использовать некоторые другие методы:

• Добавить позицию: абсолютная`фон, граница, тень и т. д., Чтобы сделать его выглядеть как всплывающая подсказка.
• Добавить класс прикоснулся к телу (через JS), когда пользователь использует любое прикосновение событие. Затем вы можете сделать тела.коснулся [название]:реют ...`, не влияя на пользователей настольных компьютеров

в

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, как вы сказали.

Спасибо @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);
  }
});​

Также, вы можете сделать и парить над дисплеем и нажмите кнопку дисплей многострочный путем добавления 
 (перевод строки) название='' атрибута, а затем преобразовать их в <БР /> для HTML нажмите кнопку на дисплее:

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