Wenn wir in Stackoverflow auf den Ruf eines Benutzers zeigen, sehen wir einen Text. Ich habe das an vielen Stellen gesehen und der Quellcode sagt mir, dass es ohne js geht. Und ich habe es versucht und nur das bekommen –
<div="text">hover me</div>
Fügen Sie Hover-Text ohne Javascript hinzu, als würden wir über den Ruf eines Benutzers schweben
Lesezeit: 2 Minuten
9945500cookie-checkFügen Sie Hover-Text ohne Javascript hinzu, als würden wir über den Ruf eines Benutzers schweben
Asche
gcochard
Verwenden Sie die title Attribut, zum Beispiel:
<div title="them's hoverin' words">hover me</div>oder:
<span title="them's hoverin' words">hover me</span>-
ist es dasselbe wie wenn wir über den Ruf eines Benutzers schweben
– Asche
13. Juni 2012 um 20:34 Uhr
-
Ja, wenn Sie sich den Quellcode für die Reputation ansehen, sehen Sie, dass das Titelattribut auf gesetzt ist
reputation score.– gcochard
13. Juni 2012 um 20:35 Uhr
-
@Kevin Diese Lösung ist in der Tat besser als die JavaScript-Lösung, da sie auf Browsern mit deaktiviertem JavaScript funktioniert und Bildschirmlesern einen Hinweis auf den Inhalt des Elements hinzufügt.
– gcochard
2. Juli 2013 um 17:45 Uhr
-
@KevinMeredith Ich würde sagen, dass die einzige Maßnahme, durch die die JS-Lösung besser wäre, darin besteht, dass Sie den angezeigten Text nicht formatieren können und nur die native Implementierung übrig bleibt.
– null298
25. November 2014 um 19:12 Uhr
-
@David d C e Freitas: Danke, dass Sie StackOverflow mit Ihrer Bearbeitung dieser Antwort aufgehellt haben … ich weiß nicht, wie ich Sie tatsächlich markieren soll, aber na ja
– Meredith
7. Januar 2019 um 9:44 Uhr
Das title-Attribut funktioniert auch gut mit anderen HTML-Elementen, zum Beispiel einem Link…
<a title="hover text" ng-href="https://stackoverflow.com/questions/11022843/{{getUrl()}}"> download link
</a>
Oft greife ich in dieser Situation zum Kürzel html-Tag.
<abbr title="Hover">Text</abbr>
-
Dieses Element soll speziell verwendet werden, um Abkürzungen anzuzeigen, daher ist dies keine gute Idee. Sie weisen Text-to-Speech-Systeme an, es als Abkürzung auszusprechen. Verwenden
<span>wenn Sie nur einen Hover-Text möchten.– Lars Marius Garshol
10. Januar 2019 um 8:40 Uhr
Sie suchen nach einem Tooltip
Für den grundlegenden Tooltip möchten Sie:
<div title="This is my tooltip">
Für eine ausgefallenere Javascript-Version können Sie nachsehen:
http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632
Der obige Link bietet Ihnen 12 Optionen für Tooltips.
Dies kann für mehr Anpassbarkeit auch in CSS erfolgen:
.hoverable {
position: relative;
}
.hoverable>.hoverable__tooltip {
display: none;
}
.hoverable:hover>.hoverable__tooltip {
display: inline;
position: absolute;
top: 1em;
left: 1em;
background: #888;
border: 1px solid black;
}<div class="hoverable">
<span class="hoverable__main">Main text</span>
<span class="hoverable__tooltip">Hover text</span>
</div>(Natürlich kann das Styling verbessert werden)
