it-swarm.com.de

Tooltips für mobile Browser

Ich setze derzeit das title-Attribut einiger HTML-Codes, wenn ich weitere Informationen angeben möchte:

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

Dann in CSS:

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

Funktioniert sehr schön, visuelle Anzeige zum Bewegen der Maus und dann ein kleines Popup-Fenster mit mehr Informationen. Bei mobilen Browsern bekomme ich diesen Tooltip jedoch nicht. title-Attribute scheinen keinen Effekt zu haben. Wie geben Sie mehr Informationen zu einem Text in einem mobilen Browser an? Wie oben, aber verwenden Sie Javascript, um einen Klick zu hören und dann einen Tooltip-Dialog anzuzeigen. Gibt es einen nativen Mechanismus?

41
at.

Sie können das Verhalten des Titel-Tooltips mit Javascript fälschen. Wenn Sie auf ein Element mit einem title-Attribut auf/tab klicken, wird ein untergeordnetes Element mit dem Titeltext angefügt. Klicken Sie erneut und es wird entfernt.

Javascript (gemacht mit 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;
}

Demo: http://jsfiddle.net/xaAN3/

24
flavaflo

Abhängig davon, wie viele Informationen Sie dem Benutzer zur Verfügung stellen möchten, kann eine modale Dialogbox eine elegante Lösung sein.

Konkret könnten Sie das qTip jQuery-Plugin ausprobieren, bei dem ein modal - Modus auf $.click() ausgelöst wird:

qTip Modal tooltip

7
msanford

Etwas ausführlichere Version der Antwort von Flavaflo:

  • Verwendet vordefiniertes div als Popup, das HTML enthalten kann, anstatt aus einem title-Attribut zu lesen
  • Öffnet/schließt bei einem Rollover, wenn die Maus verwendet wird
  • Öffnet sich beim Klicken (Touchscreen) und schließt beim Klicken auf das geöffnete Popup oder an einer anderen Stelle im Dokument.

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 hier https://jsfiddle.net/bgxC/yvs1awzk/

4
bgx

Wie @cimmanon erwähnt: span[title]:hover:after { content: attr(title) } gibt Ihnen einen rudimentären Tooltip für Touchscreen-Geräte. Leider hat dies Probleme, wenn das standardmäßige Verhalten der Benutzeroberfläche bei Touchscreen-Geräten darin besteht, den Text auszuwählen, wenn eine Nicht-Link-/Steuerelement-Taste gedrückt wird.

Um das Auswahlproblem zu lösen, können Sie span[title] > * { user-select: none} span[title]:hover > * { user-select: auto } hinzufügen.

Eine vollständige Lösung kann einige andere Techniken verwenden:

  • Fügen Sie position: absolutebackground, border, box-shadow etc hinzu, damit es wie ein Tooltip aussieht.
  • Fügen Sie dem body (über js) die Klasse touched hinzu, wenn der Benutzer ein Touch-Ereignis verwendet. __ Dann können Sie body.touched [title]:hover ... ausführen, ohne die Desktop-Benutzer zu beeinträchtigen

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>

3
Jamie Pate

Angesichts der Tatsache, dass heutzutage (2015) viele Menschen mobile Browser verwenden und der Titel in mobilen Browsern immer noch keine Form von Kontakt gefunden hat, ist es möglicherweise an der Zeit, das Vertrauen auf den Titel für sinnvolle Informationen abzuschlagen.

Es sollte niemals für kritische Informationen verwendet werden, aber es wird jetzt für nützliche Informationen zweifelhaft. Wenn diese Informationen nützlich sind und nicht für die Hälfte der Benutzer angezeigt werden können, muss eine andere Möglichkeit gefunden werden, diese Informationen fast allen Benutzern zu zeigen.

Bei statischen Seiten möglicherweise sichtbarer Text in der Nähe des betreffenden Steuerelements, auch als Kleingedrucktes. Für vom Server generierte Seiten könnte das Browser-Sniffing dies nur für mobile Browser bieten. Auf der Client-Seite könnte Javascript verwendet werden, um das Fokusereignis durch Sprudeln abzufangen, um den zusätzlichen Text neben dem aktuell fokussierten Element anzuzeigen. Dies würde den Platzbedarf auf dem Bildschirm minimieren, wäre aber nicht unbedingt von großem Nutzen, da in vielen Fällen die Fokussierung einer Steuerung nur auf eine Weise erfolgen kann, die sofort ihre Aktion auslöst und die Möglichkeit des Herausfindens umgeht darüber, bevor Sie es verwenden!

Insgesamt scheint es jedoch so zu sein, dass die Schwierigkeiten, das Titelattribut auf mobilen Geräten anzuzeigen, zu seinem Untergang führen können, meistens aufgrund der Notwendigkeit einer allgemeineren Alternative. Das ist schade, denn Mobiltelefone könnten auf diese Weise zusätzliche Informationen auf Abruf anzeigen, ohne den begrenzten Bildschirmplatz in Anspruch zu nehmen.

Es scheint seltsam, dass die Hersteller von w3c und mobilen Browsern vor langer Zeit nichts dagegen unternommen haben. Zumindest könnte der Titeltext oben im Menü angezeigt werden, wenn ein Steuerelement lange gedrückt wird.

2
Patanjali

Das title-Attribut wird in keinem mobilen Browser ** so unterstützt, dass es den Tooltip wie für Desktop-Mausbenutzer ** * anzeigt (das Attribut selbst wird natürlich im Markup unterstützt) *.
Es ist im Grunde nur für Desktopbenutzer mit Maus, nur für Benutzer mit Tastaturbelegung nicht geeignet, oder für Bildschirmlesegeräte.

Sie können mit Javascript fast gleich viel erreichen, wie Sie gesagt haben.

2
Samuel M

Vielen Dank an @flavaflo für ihre Antwort. Dies funktioniert in den meisten Fällen, aber wenn in demselben Absatz mehr als ein Titel gesucht wird und einer über den Link zu einem anderen geöffnet wird, wird der ungeöffnete Link durch den ersten angezeigt. Dies kann gelöst werden, indem der Z-Index des Titels, der "aufgetaucht" ist, dynamisch geändert wird:

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

Außerdem können Sie sowohl den Hover über die Anzeige als auch die Klickanzeige mehrzeilig machen, indem Sie &#10; (Zeilenvorschub) zum Attribut title = '' hinzufügen und diese dann für die HTML-Klickanzeige in <br /> konvertieren:

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