Tambahkan hover teks tanpa javascript seperti kita mengarahkan pada reputasi pengguna

262

Dalam stackoverflow, ketika kita mengarahkan pada reputasi pengguna kita melihat sebuah teks. Saya telah melihat ini di banyak tempat dan kode sumber memberitahu saya bahwa itu dapat dilakukan tanpa js. Dan saya mencoba dan hanya mendapatkan ini-

 <div="text">hover me</div>
html  hover 
— Abu
sumber

Jawaban:

495

Gunakan titleatribut, misalnya: 

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

atau: 

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

— gcochard
sumber
3
apakah sama seperti ketika kita mengarahkan pada reputasi pengguna
— Ash
1
Ya, jika Anda melihat kode sumber untuk reputasi, Anda akan melihat bahwa atribut title diatur ke reputation score.
— gcochard
6
@Kevin Solusi ini sebenarnya lebih baik daripada solusi JavaScript karena ini akan bekerja pada browser dengan JavaScript dinonaktifkan, dan juga menambahkan petunjuk kepada pembaca layar tentang isi elemen.
— gcochard
1
@KevinMeredith Saya akan mengatakan bahwa satu-satunya ukuran dimana solusi JS akan lebih baik adalah bahwa Anda tidak dapat mendesain teks yang muncul dan dibiarkan dengan implementasi asli saja.
— zero298
1
@David d C e Freitas: terima kasih telah mencerahkan StackOverflow dengan hasil edit Anda untuk jawaban ini ... tidak tahu bagaimana sebenarnya menandai Anda tetapi oh well
— Meredith
16

Atribut judul juga berfungsi dengan baik dengan elemen html lainnya, misalnya tautan ...

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

Seringkali saya meraih tag html singkatan dalam situasi ini.

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

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

— Harry Bosh
sumber
7
Elemen itu secara khusus dimaksudkan untuk digunakan untuk menunjukkan singkatan, jadi ini bukan ide yang baik. Anda memberi tahu sistem text-to-speech untuk mengucapkannya sebagai singkatan. Gunakan <span>jika Anda hanya ingin membawa teks.
— Lars Marius Garshol
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.