Apa tooltipnya. Keterangan alat di CSS. Meningkatkan dampak tooltips

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

Secara pribadi saya menggunakan keterangan alat, tentu saja, sebagai bagian dari eksperimen amatir yang tak terelakkan tentang pengoptimalan teks situs oleh mesin pencari. Saya tidak berani menilai seberapa sukses eksperimen saya. Sejujurnya, hasil pengoptimalan semacam itu sulit dilacak, tetapi sangat mudah untuk melakukannya secara berlebihan dengan kata kunci dan frasa. Oleh karena itu, berhati-hatilah dan jangan berlebihan dalam promosi Anda, karena Anda selalu berisiko dihukum oleh mesin pencari.

Hari ini kita akan membuat tooltips CSS. Tip alat adalah apa yang dapat Anda lihat saat Anda mengarahkan kursor ke atas, misalnya, tautan jika atribut judul berisi deskripsinya.

Tip alat dapat digunakan untuk tautan dan gambar.

Dalam bentuknya yang belum diformat, tooltip terlihat seperti ini:

Tooltip ditampilkan dengan metode sistem standar menggunakan atribut judul.
Kode tautan standar dengan keterangan alat tanpa hiasan:

Tautan

CSS keterangan alat

Anda dapat menata tooltip dengan CSS. Kami akan mempertimbangkan tiga opsi keterangan alat CSS.

Sayangnya, tidak ada "resep" CSS untuk penataan judul, jadi kita harus menambahkan atribut tambahan, menatanya, dan menambahkannya ke kode tautan/gambar yang ingin kita jadikan cantik. keterangan alat css.

Pada contoh pertama, kita akan melakukannya keterangan alat css di atas gambar di bagian paling bawah.

Untuk melakukannya, kita akan menggunakan dua atribut: image, dan agar tooltip berfungsi, kita akan menggunakan ::after dan data-text untuk menampilkan teks tooltip.

Gaya CSS untuk contoh ini:

Image ( display: inline-block; position: relative; ) .image:hover::after ( content: attr(data-text); /* Tampilkan teks tooltip*/ position: absolute; left: 0; right: 0; bottom : 0px; /* Posisi tooltip */ z-index: 1; /* Menampilkan tooltip di atas elemen lain */ background: rgba(0,255,102,0.6); /* Color (RGB) dan seberapa transparan */ color: # fff; /* Warna teks */ text-align: center; /* Center text alignment */ font-family: Arial, sans-serif; /* Font typeface */ font-size: 11px; /* Ukuran teks tooltip * / padding: 5px 10px; /* Margins */ border: 1px solid #333; /* Pilihan border */ )

1

Hasil:

Untuk tautan, desain ini tidak cocok, jadi kami akan menggunakan opsi yang sedikit berbeda untuknya.
Opsi pertama akan menampilkan tooltip di atas tautan.

Podskazka( display: inline; position: relative;).podskazka:hover:after( background: #333; background: rgba(204,102,0,.8); border-radius: 5px; bottom: 26px; color: #fff; content: attr(title); left: 20%; padding: 5px 15px; position: absolute; z-index: 98; width: auto;).tooltip:hover:before( /* Tambahkan panah di bagian bawah tooltip blok */ perbatasan: solid; warna perbatasan: #cc6600 transparan; lebar perbatasan: 6px 6px 0 6px; bawah: 20px; konten: ""; kiri: 50%; posisi: mutlak; indeks-z: 99;)

Tautan

Dan opsi terakhir adalah menampilkan tooltip di bawah tautan. Opsinya mirip dengan yang sebelumnya, hanya tampilan tooltip di bawah.

Tooltip ( position: relative; /* Jadikan elemen sebagai induk dari tooltips */ kursor: bantuan;). rentang tooltip ( position: absolute; /* Gambar elemen keluar dari aliran */ margin-left: -30000px; / * Dan sembunyikan jauh di belakang tepi layar */ background-color: rgba(0,0,153,.8); /* Popup background */ color: #fafafa; /* Text color */ padding:10px; /* Padding */ -webkit-border- radius: 5px; /* Membulatkan sudut */ -moz-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;).tooltip:hover span ( / * On hover */ margin-left : 0; /* Mengembalikan kotak dari ujung layar jauh ke tempatnya */ width: 250px; /* Mengatur lebar */ z-index: 1000; /* Letakkan di paling top */ /* Posisi relatif terhadap kotak induk */ top:30px ; /* Top padding */ left:20px; /* Left padding */ ).tooltip span:after( content: ""; /* Menambahkan konten * / width:0; /* Menyembunyikannya dengan mengubahnya menjadi 0 */ height :0; border-bottom: 10px solid #000099; /* Atur warna dan tinggi segitiga dengan batas bawah */ border -kanan: 30px solid transparan; /* Kanan - lebar segitiga ke kanan */ position: absolute; /* Posisi relatif terhadap blok induk */ top:-10px; kiri:10px;)

Dalam pelajaran ini kita akan melakukannya keterangan alat saat melayang pada ikon pada bersih css. Prinsip yang sama dapat diterapkan pada gambar. Pergi untuk melihat halaman demo .

markup HTML

Mari buat daftar lima item. Tempatkan tag di dalam setiap item Saya dengan ikon yang diinginkan hanya dengan menyalin kode ikon tertentu dari situs Font Keren.

Tulis tag di bawah tag ikon menjangkau dengan teks petunjuk singkat yang sesuai.

• 
  
  Kamar yang nyaman
  


• 
  
  Kartu kredit
  


• 
  
  Mandi di kamar
  


• 
  
  Sudah termasuk sarapan
  


• 
  
  Hewan peliharaan oke
  

Setelah itu kami menyertakan file gaya - style.css. Ubah posisi ikon dari vertikal ke horizontal.

Untuk melakukan ini, kami menetapkan nilai ke wadah induk - melenturkan.

Ul (
tampilan: fleksibel;
}

Kami mewarnai dasar latar belakang di bawah ikon dan warna ikon itu sendiri.

Ul li (
latar belakang: #cecfcf;
warna: #ff;
}

Ukuran ikon diatur melalui ukuran font.

Ul li (
ukuran font: 40px;
}

Tampilan baris icon sudah terbentuk.

Saat Anda mengarahkan kursor ke ikon, warna ikon dan tampilan kursor berubah.

Ul li: arahkan (
warna: #03a9f4;
kursor: penunjuk;
}

Keterangan alat

Saat Anda mengarahkan kursor ke ikon, petunjuk teks akan muncul dalam blok persegi panjang, di HTML markup adalah teks dalam tag menjangkau. Tempatkan petunjuk di atas ikon.

Ul li span (
posisi: mutlak;
atas: -30px;
kiri: 50%
transform: translateX(-50%) translateY(-20px);
}

Mari atur ukuran kotak ke ukuran tetap berikut.

Ul li span (
lebar: 120px
tinggi: 24px;
}

Ratakan teks ke tengah secara vertikal dan horizontal.

Ul li span (
garis-tinggi: 24px;
perataan teks: tengah;
}

Warna latar belakang, warna teks, dan ukuran teks.

Ul li span (
latar belakang: #03a9f4;
warna: #ff;
ukuran font: 14px;
}

Bulatkan sudut sebesar 4px dan buat transisi mulus saat melayang.

Ul li span (
border-radius: 4px
transisi: .5s;
}

Keterangan alat menjadi tidak terlihat dan transparan.

Ul li span (
opasitas: 0
visibilitas: tersembunyi;
}

Elemen semu::sebelumnya

Untuk menggambar panah kecil di bawah blok, kami akan menggunakan elemen semu ::sebelum, yang dalam praktiknya berarti bahwa panah sebenarnya tidak ada di HTML berkas (kosong isi), tetapi hanya ada di css mengajukan. Panah yang menunjuk ke ikon tidak lebih dari bentuk persegi 10x10 piksel yang diputar 45 derajat dan ditekan ke blok menjangkau dengan nilai negatif. Akibatnya, bujur sangkar berubah menjadi segitiga dan terletak di lapisan di bawahnya z-indeks: -1 dari tag induknya menjangkau.

Dari penulis: Halo. Tip alat adalah teks penjelasan kecil yang muncul saat Anda mengarahkan kursor ke suatu elemen, biasanya gambar. Hari ini kita akan melihat bagaimana Anda dapat membuat tooltip di html dengan berbagai cara.

Permintaan standar

Secara default, atribut judul bertanggung jawab untuk menampilkan teks penjelasan. Itu dapat diberikan ke berbagai elemen, tetapi biasanya hanya digunakan untuk gambar untuk menjelaskan apa yang ditampilkan pada mereka.

Di salah satu artikel sebelumnya, saya menggunakan gambar harimau untuk menunjukkan cara bekerja dengan ukuran gambar. Jika Anda tidak keberatan, saya menggunakan gambar ini lagi. Jadi, untuk menampilkan tooltip, Anda hanya perlu menambahkan atribut title dan menuliskan teks yang diinginkan di dalamnya.

Bisa terdiri dari satu kata atau beberapa kalimat. Dan inilah tampilannya:

Petunjuk itu muncul dengan lancar, tidak segera setelah melayang, tetapi setelah beberapa saat. Ini adalah perilaku default.

Masalah utama dengan tooltip seperti itu adalah tidak dapat ditata. Bagaimana cara mengatasi masalah ini? Anda harus memberikan petunjuk dengan cara lain. Sekarang saya akan menunjukkan pasangan.

metode css murni

Cara yang sangat menarik yang memungkinkan Anda menampilkan tooltip untuk gambar dengan indah. Markup html itu sederhana, hanya gambar yang perlu dilampirkan dalam blok wadah, yang akan kita gantungkan pengenal untuk merujuknya nanti dalam gaya:

Hanya atribut nama-data yang mungkin tidak dapat Anda pahami di sini. Intinya adalah ini adalah apa yang disebut atribut data, yang dengan sendirinya tidak melakukan apa-apa, tetapi nilainya dapat digunakan dalam css dan javascript, yang membuatnya berguna dalam beberapa kasus. Anda akan melihat ini selanjutnya.

Jadi, sebagai permulaan, kami akan menjelaskan gaya untuk wadah. Kami membutuhkan pemosisian relatif karena kami akan benar-benar memposisikan blok dengan teks penjelasan sehingga pemosisian terjadi relatif terhadap blok induk, dan bukan seluruh halaman.

#tiger( posisi: relatif; tampilan: blok-sebaris; )

Tampilan garis blok, di sisi lain, akan mencegah blok (dan dengan itu blok dengan petunjuk yang akan kita buat) untuk meregang ke seluruh lebar jendela. Tetap membuat petunjuk itu sendiri. Di css, ini sangat mudah dilakukan dengan bantuan elemen semu. Seperti ini:

#tiger:hover:setelah ( konten: attr(nama-data); posisi: absolut; kiri: 0; bawah: 0; latar belakang: rgba(5,13,156,.55); warna: #fff; perataan teks: tengah ; font-family: kursif; font-size: 14px; padding: 3px 0; lebar: 100%; )

Ada banyak kode, tapi tidak ada yang rumit di sini. Pemilih #tiger:hover:after berarti sebagai berikut: saat kita mengarahkan kursor ke blok dengan gambar, kita perlu membuat elemen pseudo setelah (dan kemudian aturannya dicantumkan dalam kurung kurawal). Content: attr(data-name) properti menetapkan nilai teks dari blok. Itu akan sama dengan apa yang tertulis di atribut data-name dari blok pembungkus gambar.

Tip alat ini muncul saat Anda mengarahkan kursor ke gambar, tetapi tidak seperti yang standar, ini muncul secara tiba-tiba, dan kemunculannya sendiri terjadi langsung pada saat melayang. Tampilan mulus dalam hal ini tidak akan berfungsi, karena transisi mulus tidak didukung untuk elemen semu.

Metode 2: Css murni dan fade in

Namun, dengan menulis ulang kode sedikit, Anda dapat memperoleh tampilan petunjuk yang mulus, dan, sekali lagi, tanpa menggunakan javascript.

Untuk melihat sendiri 2 efek yang akan saya tunjukkan selanjutnya, saya sarankan membuka notepad atau editor kode yang nyaman dan mengulangi semuanya setelah saya. Benar, untuk ini Anda masih perlu menghubungkan file gaya, meskipun gaya juga dapat ditulis dalam html dalam tag