Fügen Sie Schwebetext ohne Javascript hinzu, so wie wir über den Ruf eines Benutzers schweben

262

Wenn wir im Stackoverflow über die Reputation eines Benutzers schweben, sehen wir einen Text. Ich habe dies an vielen Stellen gesehen und der Quellcode sagt mir, dass es ohne js möglich ist. Und ich habe versucht und nur das bekommen-

 <div="text">hover me</div>

html hover

— Asche
quelle

495

Verwenden Sie das titleAttribut zum Beispiel:

<div title="them's hoverin' words">hover me</div>

Erweitern Sie das Snippet

oder:

<span title="them's hoverin' words">hover me</span>

Erweitern Sie das Snippet

— gcochard
quelle

3

ist es das gleiche wie wenn wir über den Ruf eines Benutzers schweben

— Ash

1

Ja, wenn Sie sich den Quellcode für die Reputation ansehen, werden Sie feststellen, dass das title-Attribut auf gesetzt ist reputation score.

— Gcochard

6

@ Kevin Diese Lösung ist in der Tat besser als die JavaScript-Lösung, da sie in Browsern mit deaktiviertem JavaScript funktioniert und Bildschirmlesern einen Hinweis auf den Inhalt des Elements gibt.

— Gcochard

1

@ KevinMeredith Ich würde sagen, dass die einzige Maßnahme, mit der 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

1

@ 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

16

Das title-Attribut funktioniert auch gut mit anderen HTML-Elementen, z. B. einem Link ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>

— Slavomir
quelle

15

Oft greife ich in dieser Situation nach dem Abkürzungs-HTML-Tag.

<abbr title="Hover">Text</abbr>

https://www.w3schools.com/tags/tag_abbr.asp

— Harry Bosh
quelle

7

Dieses Element soll speziell zur Angabe von Abkürzungen verwendet werden, daher ist dies keine gute Idee. Sie fordern Text-zu-Sprache-Systeme auf, sie als Abkürzung auszusprechen. Verwenden <span>Sie diese Option, wenn Sie nur einen Hover-Text möchten.

— Lars Marius Garshol

8

Sie suchen nach Tooltip

Für den grundlegenden Tooltip möchten Sie:

<div title="This is my tooltip">

Für eine schickere Javascript-Version können Sie Folgendes prüfen:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

Über den obigen Link erhalten Sie 12 Optionen für QuickInfos.

— Abk
quelle