Dodaj tekst zawisu bez javascript, tak jak my na reputacji użytkownika

262

W stosie przepływu, gdy najeżdżamy na reputację użytkownika, widzimy tekst. Widziałem to w wielu miejscach, a kod źródłowy mówi mi, że można to zrobić bez JS. I próbowałem i dostałem tylko to-

 <div="text">hover me</div>
html hover Popiół
źródło

Odpowiedzi:

495

Użyj titleatrybutu, na przykład: 

<div title="them's hoverin' words">hover me</div>
Rozwiń fragment kodu

lub: 

<span title="them's hoverin' words">hover me</span>
Rozwiń fragment kodu

gcochard
źródło
3
to tak samo, jak gdy najeżdżamy na reputację użytkownika
Ash
1
Tak, jeśli spojrzysz na kod źródłowy reputacji, zobaczysz, że atrybut title jest ustawiony na reputation score.
gcochard
6
@Kevin To rozwiązanie jest w rzeczywistości lepsze niż rozwiązanie JavaScript, ponieważ będzie działać w przeglądarkach z wyłączoną obsługą JavaScript, a także dodaje wskazówki dla czytników ekranu na temat zawartości elementu.
gcochard
1
@KevinMeredith Powiedziałbym, że jedyną miarą, według której rozwiązanie JS byłoby lepsze, jest to, że nie można stylizować tekstu, który się pojawi, i pozostawia się tylko z implementacją natywną.
zero298
1
@David d C e Freitas: dziękuję za rozjaśnienie StackOverflow z edycją tej odpowiedzi ... nie wiem, jak cię otagować, ale no cóż
Meredith
16

Atrybut title działa również dobrze z innymi elementami HTML, na przykład linkiem ...

<a title="hover text" ng-href="{{getUrl()}}"> download link
</a>
Sławomir
źródło
15

Często w tej sytuacji sięgam po tag html skrótu.

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

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

Harry Bosh
źródło
7
Ten element ma służyć do oznaczania skrótów, więc nie jest to dobry pomysł. Mówisz systemom zamiany tekstu na mowę, aby wymawiał to jako skrót. Użyj, <span>jeśli chcesz tylko najechać tekstem po najechaniu kursorem.
Lars Marius Garshol