Podpowiedzi dla przeglądarek mobilnych

Oto CSS jedyne rozwiązanie. (Podobne do odpowiedzi @ Jamie Pate, ale bez JavaScript.)

Możemy używać pseudo klasy :hover, ale nie jestem pewien, czy wszystkie przeglądarki mobilne stosują te style, gdy element jest stuknięty. Używam pseudo klasy :focus, bo chyba bezpieczniej. Jednakże, używając pseudo klasy :focus musimy dodać tabindex="0" do elementów, które nie mają stanu skupienia.

Używam 2 @media zapytań, aby upewnić się, że wszystkie urządzenia mobilne są ukierunkowane. Na (pointer: coarse) zapytanie będzie kierowane do każdego urządzenia, na którym podstawowa metoda wprowadzania jest czymś "grubym", jak palec. A zapytanie (hover: none) skieruje na każde urządzenie, którego główny system wskazujący nie może zawiesić.

Ten fragment jest wszystkim, co jest potrzebne:

@media (pointer: coarse), (hover: none) {
      [title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
      }
      [title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
      }
    }

/*Semantic Styling*/
body {
  display: grid;
  place-items: center;
  text-align: center;
  height: 100vh;
}

a {
  height: 40px;
  width: 200px;
  background: #fa4766;
  color: #fff;
  text-decoration: none;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

/*Functional Styling*/
@media (pointer: coarse), (hover: none) {
  [title] {
    position: relative;
    display: flex;
    justify-content: center;
  }
  [title]:focus::after {
    content: attr(title);
    position: absolute;
    top: 90%;
    color: #000;
    background-color: #fff;
    border: 1px solid;
    width: fit-content;
    padding: 3px;
  }

}

<a title="this is the Title text" tabindex="0">Tag with Title</a>

Oczywiście, musisz otworzyć to na urządzeniu mobilnym, aby go przetestować. Oto Długopis z tym samym kodem.

Nieco bardziej rozbudowana wersja odpowiedzi flavaflo:

• używa predefiniowanego div jako pop-up, który może zawierać HTML, zamiast odczytu z atrybutu title
• otwiera/zamyka po najechaniu myszą
• otwiera się po kliknięciu (ekran dotykowy) i zamyka po kliknięciu na otwartym oknie podręcznym lub gdziekolwiek indziej w dokumencie.

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

});

Demo tutaj https://jsfiddle.net/bgxC/yvs1awzk/

W zależności od tego, ile informacji chcesz przekazać użytkownikowi, modalne okno dialogowemoże być eleganckim rozwiązaniem.

W szczególności, możesz spróbować QTIP jQuery plugin, który ma trybmodal uruchomiony na $.click():

Biorąc pod uwagę, że wiele osób obecnie (2015) korzysta z przeglądarek mobilnych, a title nadal nie znalazła formy ekspozycji w przeglądarkach mobilnych, może nadszedł czas, aby zrezygnować z polegania na title dla istotnych informacji.

Nigdy nie powinna być używana do krytycznych informacji, ale teraz staje się wątpliwa dla użytecznych informacji, ponieważ jeśli ta informacja jest przydatna i nie może być pokazana połowie użytkowników, to należy znaleźć inny sposób pokazania jej prawie wszystkim użytkownikom.

Dla statyczne strony, być może jakiś widoczny tekst w pobliżu odpowiedniej kontroli, nawet jako drobny druk. W przypadku stron generowanych przez serwer sniffing przeglądarki może zapewnić to tylko dla przeglądarek mobilnych. Po stronie klienta, javascript może być używany do przechwytywania zdarzenia focus, poprzez bubbling, aby pokazać dodatkowy tekst obok aktualnie ustawionego elementu. To minimalizowałoby zajmowaną przestrzeń ekranu, ale niekoniecznie byłoby bardzo przydatne, ponieważ w wielu przypadkach skupienie uwagi na kontroli można zrobić tylko w sposób, który natychmiast aktywuje swoje działanie, omijając możliwość dowiedzenia się o nim przed użyciem!

Wydaje się dziwne, że twórcy W3C i mobilnych przeglądarek zrobili dawno temu nie robiliśmy nic w tej sprawie. Przynajmniej mogli wyświetlić tekst tytułowy na górze menu, które pojawia się po długim naciśnięciu kontrolki.

Osobiście chciałbym, aby był umieszczony na górze menu prawym przyciskiem myszy/długim dotknięciem, ponieważ nie będzie timeout i będzie dostępny we wszystkich przeglądarkach.

Inną alternatywą jest konstruowanie przypisów, więc indeks górny typu [n] jest umieszczany obok elementu / tekstu wymagającego więcej informacji, łącząc się z tekstem objaśniającym w liście na dole strony. Każdy z nich może mieć podobny odnośnik typu [n] do oryginalnego tekstu/elementu. W ten sposób wyświetlacz pozostaje czytelny, ale zapewnia łatwą dwukierunkową wymianę w prosty sposób. Czasami najlepsze są stare sposoby drukowania, z niewielką pomocą hiperłącza.

Atrybut title został przejęty przez niektóre przeglądarki, aby zapewnić tekst pomocy dla atrybutu pattern, ponieważ jego tekst pojawia się, jeśli wzorzec nie pasuje do tekstu w elemencie wejściowym. Zazwyczaj jest to jest dostarczenie przykładów odpowiedniego formatu.

Jak wspomniał @cimmanon: span[title]:hover:after { content: attr(title) } daje podstawową podpowiedź na urządzeniach z Ekranem dotykowym. Niestety ma to problemy, gdy domyślnym zachowaniem interfejsu na urządzeniach z Ekranem dotykowym jest zaznaczanie tekstu, gdy naciśnięty jest dowolny non-link / uicontrol.

Aby rozwiązać problem z zaznaczeniem możesz dodać span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }

Pełne rozwiązanie może użyć innych technik:

• dodaj position: absolute background, border, box-shadow itp, aby wyglądało to jak podpowiedź.
• Dodaj klasę touched do body (poprzez js), gdy użytkownik korzysta z dowolnego zdarzenia dotykowego. Następnie możesz zrobić body.touched [title]:hover ... bez wpływu na użytkowników desktopów

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>

Atrybut title nie jest obsługiwany w żadnych przeglądarkach mobilnych ** w taki sposób, że wyświetla etykietę tak samo jak dla użytkowników myszy stacjonarnych* **(sam atrybut jest oczywiście obsługiwany w znacznikach)*.
Jest to w zasadzie tylko dla użytkowników komputerów stacjonarnych z myszą, klawiaturą tylko użytkownicy nie mogą z niej korzystać, lub screenreaders.

Można osiągnąć prawie podobne z javascript, jak powiedziałeś.

Dzięki @ flavaflo za odpowiedź. Działa to w większości przypadków, ale jeśli w tym samym akapicie znajduje się więcej niż jeden tytuł, a jeden otwiera się nad linkiem do innego, nieotwarty link pokazuje przez pierwszy. Można to rozwiązać dynamicznie zmieniając Indeks z tytułu, który "wyskoczył":

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

Możesz również ustawić kursor nad wyświetlaczem i kliknięciem wyświetl wielowierszową, dodając 
 (linefeed) do atrybutu title=", a następnie przekonwertować go na <br /> dla wyświetlanie kliknięcia html:

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

Wiem, że to stare pytanie, ale znalazłem rozwiązanie CSS, które działa również na urządzeniach mobilnych, w ogóle nie używa tytułu i jest łatwe do wdrożenia, wyjaśnione tutaj:

Https://www.w3schools.com/css/css_tooltip.asp Explanation:

Na urządzeniach mobilnych, z Ekranem dotykowym, pierwsze wejście działa jak css hover, więc działa jak podpowiedź przełączania po naciśnięciu na nim.

Przykład kodu:

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 2px dotted #666;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 15em;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -8em;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 0.5em;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div> 

Szukałem łatwego rozwiązania CSS, a to jest naprawdę najprostsze, jakie znalazłem:

<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">

<span aria-label="Whats up!" data-balloon-pos="up">Hover me!</span>

Przykład roboczy: https://jsfiddle.net/5pcjbnwg/

Jeśli chcesz dostosować podpowiedź, znajdziesz więcej informacji tutaj: https://kazzkiq.github.io/balloon.css/