tooltips untuk Tombol

292

Apakah mungkin untuk membuat tooltip untuk tombol html. Ini adalah tombol HTML normal dan tidak ada atribut Title karena ada untuk beberapa kontrol html. Ada pemikiran atau komentar?

html button tooltip SARAVAN
sumber

Jawaban:

559

Cukup tambahkan titleke button.

<button title="Hello World!">Sample Button</button>
Luaskan cuplikan

Muad'Dib
sumber
9
@ EduardLuca, dalam kasus saya tooltip benar-benar tidak berfungsi pada disabledtombol karena Bootstrap ditetapkan pointer-events: noneuntuk keadaan dinonaktifkan. Ini harus berfungsi jika diatur pointer-events: autolangsung ke elemen.
Vitaliy Alekask
Selain itu, tooltip akan bertujuan untuk menunjukkan bagian bawah dari tempat mouse berada. Jadi jika elemen target ada di kanan bawah layar, maka tooltip akan berebut pointer mouse. Secara lebih umum: posisi ujung terkadang tidak pintar ... tapi saya kira itu hanya browser saja.
gideon
1
Ada situasi di mana tooltips yang diperlukan , tetapi penting untuk mempertimbangkan userbase Anda ketika menggunakan metode dalam jawaban ini. Saya menggunakan titleatribut untuk menunjukkan pintasan keyboard untuk tombol karena pintasan tidak diperlukan dan hanya menyentuh perangkat yang tidak menggunakan keyboard.
Dave F
tetapi ini tidak menunjukkan tooltip ketika Anda menggunakan keyboard untuk memfokuskan tombol, ada trik lain untuk menangani ini? Saya kira ini masalah aksesibilitas, bukan?
Nikhil
Referensi: HTML Living Standard 3.2.6.1 Atribut judul .
Ludovic Kuty
43

baik <button>tag dan <input type="button">menerima atribut judul ..

Gabriele Petrioli
sumber
Bagaimana dengan menggunakan tautan HTML biasa <a>dan href?
Aaron Franke
1
@AaronFranke atag ya dan semua tag mendukung titleatribut. Lihat developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
Gabriele Petrioli
12

Gunakan titleatribut. Ini adalah atribut HTML standar dan secara default ditampilkan di tooltip oleh sebagian besar browser desktop.

skyman
sumber
Masalah yang saya baca meskipun menyoroti bahwa atribut judul tidak sepenuhnya didukung oleh banyak peramban seluler. Saat ini saya sedang meneliti ini untuk beberapa masalah ADA dan tampaknya hanya sedikit didukung.
isaac weathers
3
@isaacweathers Nah, bagaimana Anda "mengarahkan" di peramban seluler, agar dapat melihat judul?
mbomb007
@ mbomb007 -: status fokus pada iOS dengan sulih suara hampir sama dengan: atribut hover yang Anda bisa dapatkan.
isaac weathers
Tautan itu fantastis, tetapi tautan itu seharusnya tidak menjadi satu-satunya informasi dalam jawaban Anda. Ketika seseorang masuk ke Stack Exchange, pertanyaan "jawaban" sebenarnya harus berisi jawaban. Bukan hanya sekelompok arah menuju jawaban.
Erik Philips
10

Untuk semua orang di sini mencari solusi gila , cukup coba saja

title="your-tooltip-here"

dalam tag apa pun . Saya sudah menguji ke tddalam dan adi dan itu cukup berhasil.

Davidson Lima
sumber
2
@ krillgar, saya memberikan solusi umum yang berfungsi tidak hanya dengan tombol tetapi juga tag lainnya. Niat saya memperkuat kemungkinan ini.
Davidson Lima
3
mengenai komentar terakhir Anda, itu sudah apa jawaban skyman katakan bertahun-tahun yang lalu.
Pac0
2

Sebuah tombol menerima atribut "judul". Anda kemudian dapat menetapkan nilai yang Anda ingin membuat label muncul ketika Anda mengarahkan mouse ke tombol.

<button type="submit" title="Login">
Login</button>
Luaskan cuplikan

Félix Urrutia
sumber
1

Atribut judul dimaksudkan untuk memberikan lebih banyak informasi. Ini tidak berguna untuk SEO sehingga tidak pernah merupakan ide yang baik untuk memiliki teks yang sama dalam judul dan alt yang dimaksudkan untuk menggambarkan gambar atau input dibandingkan apa yang dilakukannya. misalnya:

<button title="prints out hello world">Sample Buttons</button>

<img title="Hms beagle in the straits of magellan" alt="HMS Beagle painting" src="hms-beagle.jpg" />

Atribut title akan membuat tip alat, tetapi akan dikontrol oleh browser sejauh mana ia muncul dan seperti apa tampilannya. Jika Anda ingin kontrol lebih lanjut ada opsi jQuery pihak ketiga, banyak template css seperti Bootstrap memiliki solusi bawaan, dan Anda juga dapat menulis solusi css sederhana jika Anda mau. lihat solusi w3schools ini .

AU Crawford
sumber
-1

Anda harus menggunakan kedua judul dan alt atribut untuk membuatnya bekerja di semua browser.

<button title="Hello World!" alt="Hello World!">Sample Button</button>
Sergey Gurin
sumber
1
Mengapa Anda harus menggunakan keduanya?
Andrei Cioara
karena beberapa browser menggunakan atribut alt dan beberapa judul
Sergey Gurin
5
Omong kosong. The altatribut hanya untuk berlaku img, input type="image"dan areatag.
bitbitdecker