Saya memiliki pengalaman penempatan atribut judul="" di tag judul dan tautan tingkat pertama.

Secara pribadi, saya menggunakan tooltips, tentu saja, sebagai bagian dari eksperimen amatir yang tak terhindarkan optimasi mesin pencari teks situs. Saya tidak berani menilai seberapa sukses eksperimen saya. Sejujurnya, hasil optimasi tersebut sulit dilacak, tetapi terlalu berlebihan kata kunci dan frase dapat dilakukan dengan sangat mudah. Oleh karena itu, berhati-hatilah dan jangan berlebihan dalam berpromosi, karena Anda selalu berisiko dihukum oleh mesin pencari.

Vlad Merzhevich

DI DALAM HTML sudah Ada atribut judul global yang dapat ditambahkan ke elemen apa pun di halaman web. Kehadiran atribut ini menambahkan tooltip yang muncul saat Anda mengarahkan mouse ke atas elemen. Font teks, ukuran tooltip dan tampilannya secara keseluruhan bergantung pada sistem operasi dan tidak dapat diubah menggunakan gaya. Selain itu, banyak pengembang tidak senang karena petunjuk seperti itu hilang dengan cepat. Hal ini memaksa Anda untuk mencari cara membuat tooltip Anda sendiri, yang akan dirancang sesuai keinginan. Tentu saja paling banyak metode universal ya, namun dalam beberapa kasus, hal ini cukup dilakukan hanya dengan CSS saja.

Sebagai contoh, saya memilih foto; saat Anda mengarahkan kursor mouse ke foto tersebut, nama foto tersebut akan ditampilkan. Kami akan melakukan keluaran teks sendiri menggunakan properti content dan mengambil nilai teks dari beberapa atribut melalui attr() . Sayangnya, konten tidak akan berfungsi sesuai keinginan jika digabungkan dengan img , sehingga foto dimasukkan ke dalam elemen, yang mana kami menambahkan atribut data-title dengan teks tooltip. Ada godaan untuk memasukkan atribut title dan menggunakannya, namun dalam kasus ini dua tooltip akan ditampilkan secara bersamaan: satu adalah "asli", dan yang lainnya adalah milik kita. Jadi kami menggunakan atribut data-title kami sendiri, karena HTML5 mengizinkannya. Demikianlah yang kita dapatkan kode berikut(contoh 1).

Contoh 1: kode HTML

HTML5 YAITU Cr Op Sa Fx

Keterangan alat di CSS

Mari beralih ke gaya tooltip kita. Pertama, Anda harus membuatnya muncul. Untuk melakukan ini, kita akan menggunakan elemen semu ::after, yang kita tambahkan konten: attr(data-title) .

Foto::setelah ( konten: attr(judul data); )

Ternyata setelah isi elemen dengan kelas foto akan ditampilkan teks dari atribut data-title yang kita butuhkan. Namun karena tooltip hanya akan muncul ketika Anda mengarahkan kursor ke foto dengan kursor mouse, kami juga akan menambahkan :hover pseudo-class.

Foto:hover::after ( konten: attr(data-title); )

Yang tersisa hanyalah mengatur gaya yang diinginkan dari tooltip kita, khususnya posisi, warna latar belakang, teks, bingkai, dll. (contoh 2).

Contoh 2: Gaya keterangan alat

HTML5 CSS3 YAITU Cr Op Sa Fx

Keterangan alat dalam CSS .photo ( display: inline-block; /* Elemen inline-block */ position: relative; /* Relative positioning */ ) .photo:hover::after ( content: attr(data-title); / * Menampilkan teks */ position: absolute; /* Positioning absolut */ kiri: 20%; atas: 30%; /* Posisi tooltip */ z-index: 1; /* Menampilkan tooltip di atas elemen lain */ latar belakang : rgba( 255,255,230,0.9); /* Warna latar belakang semi-transparan */ jenis font: Arial, sans-serif; /* Jenis huruf */ ukuran font: 11 piksel; /* Ukuran teks keterangan alat */ padding: 5px 10px ; / batas: 1 piksel padat #333; /* Opsi batas */ )

Hasil dari contoh ini ditunjukkan pada Gambar. 1.

Beras. 1. Jenis keterangan alat

Posisi tooltip tidak bergantung pada posisi kursor; ia muncul di tempat yang sama saat Anda mengarahkan kursor ke atas gambar. Anda dapat membuat tooltip muncul di bagian bawah foto, sehingga tidak menutupi sebagian besar gambar. Gayanya akan sedikit berubah (contoh 3).

Contoh 3. Menampilkan tooltip di bagian bawah foto

HTML5 CSS3 YAITU Cr Op Sa Fx

Keterangan alat dalam CSS .photo ( display: inline-block; /* Elemen inline-block */ position: relative; /* Relative positioning */ ) .photo:hover::after ( content: attr(data-title); / * Menampilkan teks */ position: absolute; /* Positioning absolut */ kiri: 0; bawah: 5px; /* Posisi tooltip */ z-index: 1; /* Menampilkan tooltip di atas elemen lain */ latar belakang : rgba(0,42,167,0.6); /* Warna latar belakang semi transparan */ warna: #fff; /* Warna teks */ perataan teks: tengah; /* Perataan teks di tengah */ font-family: Arial, sans -serif ; /* Jenis huruf */ ukuran font: 11 piksel; /* Ukuran teks keterangan alat */ bantalan: 5 piksel 10 piksel; /* Margin */ batas: 1 piksel padat #333;

Hasil dari contoh ini ditunjukkan pada Gambar. 2.

Beras. 2. Jenis keterangan alat

Sayangnya, properti transisi, yang dapat Anda gunakan untuk menganimasikan tooltip, tidak berfungsi dengan elemen semu. Oleh karena itu, kami harus puas dengan kemunculan tooltip kami yang tiba-tiba. Juga tidak akan ada efek pada browser IE8 dan sebelumnya, versi ini tidak mendukung ::after . Namun, jika Anda mengganti elemen semu ini dengan :after , Anda bisa mendapatkan opsi yang kurang lebih berfungsi.

Ahli tata letak sepertinya tidak akan menemukan sesuatu yang baru dalam postingan ini. Posting ini lebih ditujukan untuk desainer tata letak pemula yang, seperti saya, memiliki masalah dalam membuat dan menata tooltip universal.

Baru-baru ini, ketika saya membuat blog kecil, saya dihadapkan pada tugas membuat tooltip yang bergaya namun sederhana. Setelah mencoba cara yang berbeda membuat wadah div terpisah untuk tooltips, atau membuat tooltips CSS murni, saya menemukan solusi universal, yang tidak akan mengacaukan kode, akan kompatibel lintas-browser, dan pada saat yang sama akan sangat mudah diterapkan.
Siapa pun yang tertarik dengan metode saya memecahkan masalah sederhana ini, saya bertanya di bawah kucing.

Itu saja!
Hasilnya, kita akan mendapatkan sesuatu seperti ini: Demo

Berkat ini skrip sederhana semua elemen pada halaman yang memiliki atribut data-tooltip akan menerima tooltip.

Terima kasih atas perhatian Anda!

Pada artikel ini saya ingin membahas beberapa opsi untuk mengatur fitur seperti itu dalam tata letak apa pun. Omong-omong, saya sudah memiliki contoh nyata penerapan seperti itu di situs web saya. Jika Anda menggulir ke bawah ke komentar di halaman ini dan mengarahkan kursor ke tanggal komentar, akan segera menjadi jelas apa yang sebenarnya dikatakan. Nah, jika belum ada komentar, Anda bisa meninggalkannya sekaligus.

Saya melihat dua metode utama untuk mengimplementasikan tooltip, yaitu dengan mengarahkan kursor, yang juga paling populer, dan kurang populer saat Anda mengeklik suatu elemen. Mari kita mulai secara alami dengan tampilan tooltip saat Anda mengarahkan kursor ke suatu elemen.

Dalam artikel ini, saya pikir saya akan memulai dengan hal yang paling primitif, menampilkan petunjuk menggunakan title , yang tidak dapat diformat dengan cara apa pun, tetapi saya rasa Anda dapat melewatinya, karena sudah jelas. Jika hal di atas belum sepenuhnya jelas bagi Anda, saya rasa setelah mempelajari video tentangnya, semuanya akan menjadi lebih jelas.

Ini tidak lebih rumit dari metode yang saya lewatkan. Hanya sebagai ganti atribut title saya akan menggunakan data-title dan design gaya css. Sebenarnya saya berikan kode html di bawah ini:

?

/* Kami menggunakan elemen semu after untuk mendesain bilah itu sendiri, tetapi pada saat yang sama kami menyembunyikannya, karena elemen tersebut seharusnya hanya muncul di hover */ .hover:after (content: attr(data-title); display: none ;posisi: absolut; bawah: 130%; kiri: 0px; warna latar: #fff; bantalan: 5px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ; bayangan kotak: 0 1px 1px rgba(0,0,0,.16); bayangan kotak: 0 1px 1px rgba(0,0,0,.16);ukuran font: 12px;) / * Tambahkan properti sehingga ketika Anda mengarahkan kursor ke suatu elemen, kotak petunjuk muncul */ .hover:hover:after(display: block;)

Di sini saya ingin menarik perhatian Anda pada fakta bahwa ini hanyalah contoh properti desain. Anda dapat mendesain secara alami penampilan mati, sesuai keinginanmu.

Ini mungkin yang paling banyak cara populer implementasi peluang ini. Oleh setidaknya Saya paling sering menggunakannya.

?

DI DALAM ini adalah tip desain dalam contoh ini Saya juga tidak melihat ada yang istimewa, tapi lebih, tapi hasilnya akan lebih baik meski tanpa menggunakan atribut data-title. Kontainer masuk dalam hal ini

berfungsi sebagai pembungkus elemen kita yang akan digunakan untuk mengimplementasikan tooltip. Dan juga dadu itu sendiri akan diposisikan relatif terhadap wadahnya. /* mengatur posisi relatif ke wadah */ .block(position:relative;) /* Desain elemen tersembunyi

default */ .hidden (tampilan: tidak ada; posisi: absolut; bawah: 130%; kiri: 0px; warna latar: #fff; warna: #3aaeda; padding: 5px; perataan teks: tengah; -moz-box - bayangan: 0 1px 1px rgba(0,0,0,.16); -webkit-kotak-bayangan: 0 1px 1px rgba(0,0,0,.16); 0,0,.16); ukuran font: 12px;) /* Dekorasi tambahan untuk elemen tersembunyi (opsional) */ .hover + .hidden:before (konten: " "; position: absolute; top: 98%; kiri : 10%; margin-kiri: -5px; border-style: solid: 0; border-right: 7px solid: #fff transparan transparan transparan;) /* Dekorasi tambahan untuk elemen tersembunyi (opsional ) */ .hover + .hidden:after (konten: " "; posisi: absolut; atas: 100%; kiri: 10% ; margin-kiri: -5 piksel; gaya batas: padat; lebar: 0; batas kanan : 7px padat; ,0,0,.16) transparan transparan transparan; z-index: 1;) /* Tampilan elemen tersembunyi saat hover */ .hover:hover + .hidden(display: block;)

Kedua opsi ini dapat digunakan di situs web Anda untuk menampilkan tooltip saat Anda mengarahkan kursor.

Cara sederhana dengan registrasi, di klik. Jika diklik, kodenya akan terlihat persis sama. Satu-satunya hal adalah untuk kenyamanan saya mengganti kelas beberapa elemen. Kelas semu fokus juga digunakan sebagai pengganti hover . Perlu juga dicatat di sini bahwa secara berurutan metode ini

?

berfungsi, Anda perlu menggantinya dengan , yaitu dengan hyperlink. Kode CSS dalam hal ini mirip dengan tampilan blok saat hover, hanya kelas lain yang digunakan untuk kenyamanan. Dan untuk pengoperasian yang benar

/* Kami menggunakan kelas semu after untuk mendesain tempat itu sendiri, tetapi pada saat yang sama kami menyembunyikannya, karena itu hanya akan muncul ketika diklik */ .focus:after (content: attr(data-title); display: none ; posisi: absolut; bawah: 130%; kiri: 0px; warna latar: #fff; bantalan: 5px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16) ; bayangan kotak: 0 1px 1px rgba(0,0,0,.16); bayangan kotak: 0 1px 1px rgba(0,0,0,.16);ukuran font: 12px;) / * Tambahkan properti sehingga ketika Anda mengklik suatu elemen, kotak petunjuk muncul */ .focus:focus:after(display: block;)

Seperti yang Anda lihat, praktis tidak ada perbedaan.

Metode klik ini juga akan lebih relevan jika Anda perlu memformat tooltip sedikit lebih baik daripada opsi sebelumnya.

?

Dan desain dadu yang sebenarnya:

/* mengatur posisi relatif ke wadah */ .block(position:relative;) /* Mendesain elemen tersembunyi secara default */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background- warna: # fff; warna: #3aaeda; perataan teks: tengah; -moz-box-shadow: 0 1px 1px rgba(0,0,0,.16); -shadow: 0 1px 1px rgba(0,0,0,.16); ukuran font: 12px;) /* Dekorasi tambahan untuk elemen tersembunyi (opsional) */ .focus + .hidden:before (konten: " " ; posisi: absolut; atas: 98%; kiri: 10%; lebar tepi: 7 piksel; kanan: 7px solid #fff; warna batas: #fff transparan transparan; z-index: 2;) /* Dekorasi tambahan untuk elemen tersembunyi (opsional) */ .focus + .hidden :after (content: " "; position : absolut; atas: 100%; kiri: 10%; margin-kiri: -5 piksel; lebar batas: 5 piksel; gaya batas: tinggi: 0; batas: 7px solid transparan; perbatasan-kanan: 7px solid #fff; warna batas: rgba(0,0,0,.16) transparan transparan transparan; z-index: 1;) /* Tampilan elemen tersembunyi saat diklik */ .focus:focus + .hidden(display: block;)

Seperti yang Anda lihat, tidak ada yang rumit. Selain itu, Anda dapat mengatur perubahan status dengan mengarahkan kursor dan mengklik. Meskipun sejujurnya, saya tidak bisa mengatakan seberapa relevan metode klik-untuk-klik.

Ada juga tiruan dari contoh terakhir yang menggunakan , tetapi penggunaannya menurut saya tidak sepenuhnya benar khususnya untuk mengatur tooltip di situs web Anda. Jika Anda sangat tidak setuju dengan saya, selamat datang di komentar.

Itu saja untukku. Semoga beruntung semuanya.