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 berbagai cara membuat wadah div terpisah untuk tooltips, atau membuat tooltips dengan CSS murni, saya menemukan solusi universal yang tidak akan mengacaukan kode, kompatibel lintas-browser, dan pada saat yang sama akan sangat mudah diterapkan.
Siapapun yang tertarik dengan metode saya dalam memecahkan masalah sederhana ini, silakan merujuk ke cat.
Tautan Keterangan Alat
Seperti yang mungkin sudah Anda ketahui dari daftar, saya menggunakan praprosesor css KURANG.
Kami menyertakan gaya dan skrip CSS dalam file terpisah. Kami juga memiliki satu link dan blok div, yang akan menjadi wadah untuk tooltip.
Spesifikasi HTML5 memungkinkan penggunaan atribut khusus dari tipe data-atribut, yang dapat menyimpan beberapa informasi tentang suatu elemen atau blok. Di dalam atribut data kita akan menyimpan teks tooltips.
Tautan
Untuk penyimpanan saya menggunakan atribut data-tooltip.
Kita sudah selesai dengan HTML - kita bisa beralih ke gaya. CSS Saya menggunakan perpustakaan LESS Elements dan merekomendasikannya kepada semua orang, jadi saya akan menulis beberapa properti menggunakan kerangka ini.
@import "css/elements.less"; #tooltip ( z-index: 9999; posisi: absolut; tampilan: tidak ada; atas:0px; kiri:0px; warna latar: #000; padding: 5px 10px 5px 10px; warna: putih; .opacity(0.5); . bulat (5 piksel)
Dari daftar jelas bahwa di baris pertama kita menghubungkan LE, atur blok div#tooltip ke posisi absolut dan sembunyikan. Selanjutnya kita memberi blok warna latar belakang dan warna teks, bulatkan sudutnya (5px) dan atur nilai transparansi menjadi 50%. jQuery Sekarang sampai pada bagian yang menyenangkan - jQuery.
$.jQuery(dokumen).siap(fungsi() ( $("").mousemove(fungsi (eventObject) ( $data_tooltip = $(ini).attr("data-tooltip"); $("#tooltip") .text($data_tooltip) .css(( "atas" : eventObject.pageY + 5, "kiri" : eventObject.pageX + 5 )) .show();)mouseout(function () ( $("#tooltip ").hide() .text("") .css(( "atas" : 0, "kiri" : 0 )); )); ));// Selesai siap.
Sekarang kita menambahkan semua elemen dengan atribut data-tooltip ke pilihan dan, ketika kita mengarahkan mouse ke elemen yang diinginkan, kita mendapatkan nilai tooltip dan menyimpannya dalam variabel. Selanjutnya, kita menambahkan teks petunjuk ke blok #tooltip, berikan koordinat kursor dari tepi halaman + 5 px dan terakhir tampilkan blok dengan tooltip di tempat yang tepat. Setelah mouse meninggalkan elemen, kita menyembunyikan blok #tooltip, menghapus isinya dan mengembalikannya ke 0;0;.
Itu saja!
Hasilnya, kita akan mendapatkan sesuatu seperti ini: Demo
Berkat skrip sederhana ini, semua elemen pada halaman yang memiliki atribut data-tooltip akan menerima tooltip.
Terima kasih atas perhatian Anda!
Memberikan informasi tambahan tentang elemen antarmuka pengguna yang berpotensi kompleks adalah bagian yang sangat penting dari pekerjaan perancang web dalam mengembangkan situs web yang ramah pengguna dan dapat diakses.
Salah satu mekanisme yang umum digunakan untuk menampilkan informasi tambahan di luar apa yang terlihat di halaman adalah tooltips (elemen desain untuk menampilkan petunjuk tentang elemen tertentu di layar).
Meskipun ada banyak solusi inovatif yang menggunakan CSS dan JavaScript (dengan atau tanpa menggunakan kerangka JavaScript seperti jQuery), terkadang ada baiknya untuk melihat bagaimana teknologi baru mengguncang teknik yang sudah lama ada.
Tutorial ini akan menunjukkan kepada Anda bagaimana Anda dapat membuat tooltip lintas browser yang menakjubkan hanya dengan menggunakan CSS.
 |
 |
Kapan pun Anda perlu menjelaskan singkatan atau akronim, menjelaskan arti sebuah kata, atau memberikan informasi tambahan tentang sesuatu, tooltips adalah solusi sederhana namun efektif.
Dari blok teks kecil berwarna kuning yang muncul di atas elemen seperti gambar dan menampilkan konten atribut title (atau atribut alt jika Anda kurang beruntung menggunakan Internet Explorer) hingga solusi canggih berbasis skrip menggunakan tooltips, tooltips adalah alat luar biasa yang tampaknya kurang populer di komunitas desain.
Sebagian besar browser memiliki gaya default untuk tooltips, meskipun tampilannya tidak terlalu cantik.
Sementara standar yang berkembang pesat dengan teknik-teknik baru mulai menjadi lebih baik dan didukung lebih baik oleh browser-browser baru, kebangkitan CSS juga memungkinkan kita untuk membuat tooltips (yang berfungsi sebagai pengganti default browser yang membosankan seperti di atas) pada tingkat yang baru. detail dan desain.
Jika Anda pernah menggunakan solusi berbasis jQuery sebelumnya, Anda pasti akan melihat bahwa JavaScript dapat melakukan banyak hal yang tidak dapat dilakukan CSS (seperti menunda hilangnya tooltip). Namun penyorotan dan penataan gaya dapat dilakukan dengan CSS, yang menyempurnakan desain Anda dan menginspirasi desain hebat lainnya yang melampaui tooltips.
Dalam tutorial ini kita akan membuat tooltips menggunakan CSS murni.
Ini berarti bahwa mereka akan bekerja di browser yang tidak mendukung CSS3 (seperti Internet Explorer 8 dan yang lebih lama) - mereka tidak akan terlihat sebagus di browser yang lebih baru.
Tampilan efek seperti warna, font, gambar, dan bingkai tooltip akan bergantung pada apa yang digunakan pada komputer pengguna akhir (browser, font yang diinstal, atau kontras monitor).
Ekstensi CSS3Dengan menggunakan ekstensi sederhana namun efektif seperti properti radius batas dan bayangan kotak, Anda dapat memberikan tampilan baru dan cantik pada persegi panjang pesan balon sederhana.
Apa yang ada di balik terpal kita?Mari kita mulai dengan kode HTML untuk contoh kita.
berbagai jenis tooltipUntuk memberi Anda cukup ide untuk proyek Anda sendiri, kami akan membuat lima jenis tooltip yang berbeda.
Masing-masing terlihat sangat mirip satu sama lain untuk menstandardisasi keluaran tampilan. Namun Anda kemudian dapat bereksperimen dengannya untuk mempelajarinya secara detail dan mengubah tampilannya.
Mekanisme ini seharusnya berfungsi di semua browser, namun jika perlu, Anda dapat mengubahnya sesuai keinginan.
Markup dasarPada kode di bawah ini, kami menggunakan Template Generik XHTML 1.0 dengan elemen reguler.
Karena kami menggunakan CSS untuk membangun elemen kami, untuk tujuan pembelajaran, CSS disematkan dalam dokumen menggunakan ekstensi .
Anda juga dapat menambahkan kode jQuery atau JavaScript untuk meningkatkan efek dan fungsionalitas jika Anda mau!
Tooltip Markup HTML Contoh tooltips yang dibuat dengan CSS!Arahkan mouse Anda ke atas teks untuk melihat: petunjuk klasik, pesan penting 
Critical Post Ini hanya contoh cara membuat tooltips menggunakan CSS!, tolong 
HelpIni hanya contoh cara membuat tooltips menggunakan CSS!, info 
InfoIni hanyalah contoh cara membuat tooltips menggunakan CSS! dan peringatan 
Peringatan: Ini hanyalah contoh cara membuat tooltips menggunakan CSS!.
Ini hanyalah contoh cara membuat tooltips menggunakan CSS!
Kode menggunakan elemen (tidak ada hal khusus yang terkait dengannya) dan paragraf (
) untuk teks yang mengandung elemen link (yang kelasnya "tooltip" disetel).
Mengapa tag digunakan untuk tooltips? ?Alasan kami menggunakan tag a daripada abbr , dfn atau span adalah karena IE6 memiliki dukungan yang buruk untuk:hover pseudo-selector untuk elemen selain a .
Jika Anda tidak ingin mendukung IE6, Anda dapat menggunakan tag lain.
Setiap elemen span dalam contoh diatur ke class classic (untuk tooltip reguler) atau custom (dengan critical , help , info atau warning agar sesuai dengan skema warna yang digunakan).
Penggunaan gaya ini juga memiliki beberapa bonus dalam bentuk elemen em (yang menentukan judul tooltip) dan gambar (yang digunakan sebagai ikon di tooltip; Anda dapat menggunakan gambar Anda sendiri).
CSSKami telah menulis kode HTML untuk halaman tersebut dan inilah saatnya membuat tooltips melakukan tugasnya.
Kode di bawah ini, yang ditambahkan ke bagian halaman, mengatur setiap tautan yang berisi tooltip ke gaya kecil yang bagus dengan garis bawah putus-putus (untuk membedakannya dari tautan biasa, yang memiliki garis bawah padat) dan mengatur kursor dengan tanda tanya (juga untuk diferensiasi visual).
Ini juga menghilangkan garis bawah dan mengatur warnanya (sehingga elemennya tidak terlihat seperti tautan biasa).
Bagian kedua dari kode hanya menyembunyikan tooltip sampai diperlukan.
Semuanya sangat sederhana!
Gaya CSS untuk class.tooltip .tooltip ( border-bottom: 1px dotted #000000; color: #000000; outline: none; kursor: help; text-decoration: none; position: relative; ) .tooltip span ( margin-left: -999em; posisi: absolut)Konten tooltip dihapus dari tampilan dengan menggunakan properti margin-kiri negatif, bukan tampilan: tidak ada atau visibilitas: tersembunyi karena beberapa pembaca layar mengabaikan properti ini.
Gaya CSS untuk keterangan alatKami akan segera membuat tooltip berfungsi dengan cara yang sama di berbagai browser. Sekarang mari tambahkan beberapa baris kode CSS.
Dengan menambahkan potongan kode berikut, kita akan menampilkan tooltips di layar, meskipun terlihat biasa-biasa saja dan sulit dipisahkan secara visual dari teks lainnya.
CSS untuk menampilkan tooltip .tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; posisi: absolut; kiri: 1em; atas: 2em; indeks-z: 99; margin-kiri: 0; lebar : 250px; ) .tooltip:hover img ( batas: 0; margin: -10px 0 0 -55px; float: kiri; posisi: absolut; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif ; ukuran font: 1,2em; berat font: tebal; bantalan: 0,2em 0 0,6em 0; .klasik ( bantalan: 0,8em 1em; ) .custom ( bantalan: 0,5em 0,8em 2em; ) * html a:hover ( latar belakang: transparan; ) Baris diperlukan * htmlAnda mungkin bertanya-tanya mengapa baris terakhir pada kode di atas disertakan? Ini mengatur transparansi untuk latar belakang tautan. Saat menguji tooltips, saya menemukan efek aneh di IE6 yang tidak dapat dihapus selama latar belakang tautan masih ada!
Kode di atas memastikan fungsionalitas tooltips. Mereka ditampilkan di layar, tetapi cukup sulit dipisahkan dari teks umum. Tidak ada skema warna yang membuat teks tooltip menonjol di halaman.
Atur skema warna untuk tooltips/Kode berikut menetapkan skema warna untuk masing-masing dari lima gaya tooltip.
Setelah mengubah kode halaman dan memperbaruinya di browser, tooltips akan ditampilkan saat Anda mengarahkan mouse ke link hampir sama di semua browser.
Kode CSS untuk skema warna .classic ( background: #FFFFAA; border: 1px solid #FFAD33; ) .critical ( background: #FFCCAA; border: 1px solid #FF3334; ) .help ( background: #9FDAEE; border: 1px solid # 2BB0D7; ) .info ( latar belakang: #9FDAEE; batas: 1px padat #2BB0D7; ) .peringatan ( latar belakang: #FFFFAA; batas: 1px padat #FFAD33; )Kode CSS sangat sederhana, tetapi memberikan tampilan tooltip yang bagus dan melakukan tugasnya di mana saja. Skema warna dapat diubah sesuai kebijaksanaan Anda.
Beberapa sentuhan CSS3 untuk tampilan tooltip tingkat lanjutSebelum kita menyelesaikan tutorial ini, kita akan menambahkan beberapa baris kode CSS3 untuk menambahkan efek visual ke tooltips kita. Mari atur sudut membulat menggunakan properti border-radius dan tambahkan beberapa dimensi menggunakan properti box-shadow.
Karena tidak satu pun dari properti ini didukung secara global, properti tersebut hanya akan berfungsi di beberapa versi browser terbaru. Namun jika berfungsi, tooltipnya akan terlihat rapi dan seksi!
Mari tambahkan kode di bawah ini ke rentang selector.tooltip:hover dan segarkan halaman.
Efek visual untuk batas, bayangan, dan transparansi mengangkat tooltip di atas teks halaman dan membuat informasi kontras dan mudah dibaca.
Anda mungkin memperhatikan bahwa tidak hanya properti CSS3 resmi yang digunakan, tetapi juga ekstensi untuk Mozilla dan WebKit.
Properti CSS tambahan untuk radius batas browser baru: 5px 5px; -moz-batas-radius: 5px; -radius-perbatasan webkit: 5px; bayangan kotak: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-kotak-bayangan: 5px 5px rgba(0, 0, 0, 0.1); -moz-kotak-bayangan: 5px 5px rgba(0, 0, 0, 0.1);
Tutorial ini menunjukkan bahwa meningkatkan antarmuka tidak memerlukan banyak usaha. Selain itu, ada baiknya meninjau pengalaman menggunakan CSS, yang dapat berguna dalam menetapkan tingkat interaktivitas baru untuk aplikasi web.
Dalam tutorial ini kita akan membuat tooltip saat mengarahkan kursor ke ikon menggunakan CSS murni. Prinsip yang persis sama dapat diterapkan pada sebuah gambar. Pergi untuk melihat halaman demo.
markup HTML
Mari buat daftar lima item. Di dalam setiap item kami akan menempatkan tag i dengan ikon yang diinginkan, cukup salin kode untuk ikon tertentu dari situs web Font Awesome.
Di bawah tag ikon kita akan menulis tag span 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 - flex ke wadah induk.
Ul (
tampilan: fleksibel;
}
Kami mewarnai latar belakang di bawah ikon dan warna ikon itu sendiri.
Ulli (
latar belakang: #cecfcf;
warna: #fff;
}
Ukuran ikon diatur menggunakan ukuran font.
Ulli (
ukuran font: 40px;
}
Tampilan deretan icon sudah terbentuk.
Saat Anda mengarahkan kursor ke ikon, warna ikon dan tampilan kursor berubah.
Ul li: arahkan kursor (
warna: #03a9f4;
kursor: penunjuk;
}
Saat Anda mengarahkan kursor ke ikon, tooltip teks akan muncul di blok persegi panjang; dalam markup HTML, ini adalah teks dalam tag span. Mari letakkan petunjuk di atas ikon.
rentang Ulli (
posisi: mutlak;
atas: -30 piksel;
kiri: 50%;
transformasi: TranslateX(-50%) TranslateY(-20px);
}
Mari atur ukuran kotak ke ukuran tetap berikut.
rentang Ulli (
lebar: 120 piksel;
tinggi: 24 piksel;
}
Meratakan teks ke tengah secara vertikal dan horizontal.
rentang Ulli (
tinggi garis: 24px;
perataan teks: tengah;
}
Warna latar belakang, warna teks dan ukuran teks.
rentang Ulli (
latar belakang: #03a9f4;
warna: #fff;
ukuran font: 14px;
}
Bulatkan sudut sebesar 4 piksel dan buat transisi mulus saat melayang.
rentang Ulli (
radius batas: 4px;
transisi: 0,5 detik;
}
Tooltip dibuat tidak terlihat dan transparan.
rentang Ulli (
opacity: 0;
visibilitas: tersembunyi;
}
Untuk menggambar panah kecil di bawah blok, kita akan menggunakan elemen semu ::before, yang dalam praktiknya berarti panah tersebut sebenarnya tidak ada di file HTML (konten kosong), tetapi hanya ada di file CSS. Panah yang mengarah ke suatu ikon tidak lebih dari bentuk persegi 10x10 piksel, diputar 45 derajat dan ditekan pada blok bentang dengan nilai negatif. Hasilnya, persegi diubah menjadi segitiga dan terletak pada lapisan indeks-z yang lebih rendah: -1 dari tag rentang induknya.
Memberikan informasi tambahan tentang elemen antarmuka pengguna yang berpotensi kompleks adalah bagian yang sangat penting dari pekerjaan perancang web dalam mengembangkan situs web yang ramah pengguna dan dapat diakses.
Salah satu mekanisme yang umum digunakan untuk menampilkan informasi tambahan di luar apa yang terlihat di halaman adalah tooltips (elemen desain untuk menampilkan petunjuk tentang elemen tertentu di layar).
Meskipun ada banyak solusi inovatif yang menggunakan CSS dan JavaScript (dengan atau tanpa menggunakan kerangka JavaScript seperti jQuery), terkadang ada baiknya untuk melihat bagaimana teknologi baru mengguncang teknik yang sudah lama ada.
Tutorial ini akan menunjukkan kepada Anda bagaimana Anda dapat membuat tooltip lintas browser yang menakjubkan hanya dengan menggunakan CSS.
|
|
Kapan pun Anda perlu menjelaskan singkatan atau akronim, menjelaskan arti sebuah kata, atau memberikan informasi tambahan tentang sesuatu, tooltips adalah solusi sederhana namun efektif.
Dari blok teks kecil berwarna kuning yang muncul di atas elemen seperti gambar dan menampilkan konten atribut title (atau atribut alt jika Anda kurang beruntung menggunakan Internet Explorer) hingga solusi canggih berbasis skrip menggunakan tooltips, tooltips adalah alat luar biasa yang tampaknya kurang populer di komunitas desain.
Sebagian besar browser memiliki gaya default untuk tooltips, meskipun tampilannya tidak terlalu cantik.
Sementara standar yang berkembang pesat dengan teknik-teknik baru mulai menjadi lebih baik dan didukung lebih baik oleh browser-browser baru, kebangkitan CSS juga memungkinkan kita untuk membuat tooltips (yang berfungsi sebagai pengganti default browser yang membosankan seperti di atas) pada tingkat yang baru. detail dan desain.
Jika Anda pernah menggunakan solusi berbasis jQuery sebelumnya, Anda pasti akan melihat bahwa JavaScript dapat melakukan banyak hal yang tidak dapat dilakukan CSS (seperti menunda hilangnya tooltip). Namun penyorotan dan penataan gaya dapat dilakukan dengan CSS, yang menyempurnakan desain Anda dan menginspirasi desain hebat lainnya yang melampaui tooltips.
Dalam tutorial ini kita akan membuat tooltips menggunakan CSS murni.
Ini berarti bahwa mereka akan bekerja di browser yang tidak mendukung CSS3 (seperti Internet Explorer 8 dan yang lebih lama) - mereka tidak akan terlihat sebagus di browser yang lebih baru.
Tampilan efek seperti warna, font, gambar, dan bingkai tooltip akan bergantung pada apa yang digunakan pada komputer pengguna akhir (browser, font yang diinstal, atau kontras monitor).
Ekstensi CSS3Dengan menggunakan ekstensi sederhana namun efektif seperti properti radius batas dan bayangan kotak, Anda dapat memberikan tampilan baru dan cantik pada persegi panjang pesan balon sederhana.
Apa yang ada di balik terpal kita?Mari kita mulai dengan kode HTML untuk contoh kita.
berbagai jenis tooltipUntuk memberi Anda cukup ide untuk proyek Anda sendiri, kami akan membuat lima jenis tooltip yang berbeda.
Masing-masing terlihat sangat mirip satu sama lain untuk menstandardisasi keluaran tampilan. Namun Anda kemudian dapat bereksperimen dengannya untuk mempelajarinya secara detail dan mengubah tampilannya.
Mekanisme ini seharusnya berfungsi di semua browser, namun jika perlu, Anda dapat mengubahnya sesuai keinginan.
Markup dasarPada kode di bawah ini, kami menggunakan Template Generik XHTML 1.0 dengan elemen reguler.
Karena kami menggunakan CSS untuk membangun elemen kami, untuk tujuan pembelajaran, CSS disematkan dalam dokumen menggunakan ekstensi .
Anda juga dapat menambahkan kode jQuery atau JavaScript untuk meningkatkan efek dan fungsionalitas jika Anda mau!
Tooltip Markup HTML Contoh tooltips yang dibuat dengan CSS!Arahkan mouse Anda ke atas teks untuk melihat: petunjuk klasik, pesan penting Critical Post Ini hanya contoh cara membuat tooltips menggunakan CSS!, tolong HelpIni hanya contoh cara membuat tooltips menggunakan CSS!, info InfoIni hanyalah contoh cara membuat tooltips menggunakan CSS! dan peringatan Peringatan: Ini hanyalah contoh cara membuat tooltips menggunakan CSS!.
Ini hanyalah contoh cara membuat tooltips menggunakan CSS!
Kode menggunakan elemen (tidak ada hal khusus yang terkait dengannya) dan paragraf (
) untuk teks yang mengandung elemen link (yang kelasnya "tooltip" disetel).
Mengapa tag digunakan untuk tooltips? ?Alasan kami menggunakan tag a daripada abbr , dfn atau span adalah karena IE6 memiliki dukungan yang buruk untuk:hover pseudo-selector untuk elemen selain a .
Jika Anda tidak ingin mendukung IE6, Anda dapat menggunakan tag lain.
Setiap elemen span dalam contoh diatur ke class classic (untuk tooltip reguler) atau custom (dengan critical , help , info atau warning agar sesuai dengan skema warna yang digunakan).
Penggunaan gaya ini juga memiliki beberapa bonus dalam bentuk elemen em (yang menentukan judul tooltip) dan gambar (yang digunakan sebagai ikon di tooltip; Anda dapat menggunakan gambar Anda sendiri).
CSSKami telah menulis kode HTML untuk halaman tersebut dan inilah saatnya membuat tooltips melakukan tugasnya.
Kode di bawah ini, yang ditambahkan ke bagian halaman, mengatur setiap tautan yang berisi tooltip ke gaya kecil yang bagus dengan garis bawah putus-putus (untuk membedakannya dari tautan biasa, yang memiliki garis bawah padat) dan mengatur kursor dengan tanda tanya (juga untuk diferensiasi visual).
Ini juga menghilangkan garis bawah dan mengatur warnanya (sehingga elemennya tidak terlihat seperti tautan biasa).
Bagian kedua dari kode hanya menyembunyikan tooltip sampai diperlukan.
Semuanya sangat sederhana!
Gaya CSS untuk class.tooltip .tooltip ( border-bottom: 1px dotted #000000; color: #000000; outline: none; kursor: help; text-decoration: none; position: relative; ) .tooltip span ( margin-left: -999em; posisi: absolut)Konten tooltip dihapus dari tampilan dengan menggunakan properti margin-kiri negatif, bukan tampilan: tidak ada atau visibilitas: tersembunyi karena beberapa pembaca layar mengabaikan properti ini.
Gaya CSS untuk keterangan alatKami akan segera membuat tooltip berfungsi dengan cara yang sama di berbagai browser. Sekarang mari tambahkan beberapa baris kode CSS.
Dengan menambahkan potongan kode berikut, kita akan menampilkan tooltips di layar, meskipun terlihat biasa-biasa saja dan sulit dipisahkan secara visual dari teks lainnya.
CSS untuk menampilkan tooltip .tooltip:hover span ( font-family: Calibri, Tahoma, Geneva, sans-serif; posisi: absolut; kiri: 1em; atas: 2em; indeks-z: 99; margin-kiri: 0; lebar : 250px; ) .tooltip:hover img ( batas: 0; margin: -10px 0 0 -55px; float: kiri; posisi: absolut; ) .tooltip:hover em ( font-family: Candara, Tahoma, Geneva, sans-serif ; ukuran font: 1,2em; berat font: tebal; bantalan: 0,2em 0 0,6em 0; .klasik ( bantalan: 0,8em 1em; ) .custom ( bantalan: 0,5em 0,8em 2em; ) * html a:hover ( latar belakang: transparan; ) Baris diperlukan * htmlAnda mungkin bertanya-tanya mengapa baris terakhir pada kode di atas disertakan? Ini mengatur transparansi untuk latar belakang tautan. Saat menguji tooltips, saya menemukan efek aneh di IE6 yang tidak dapat dihapus selama latar belakang tautan masih ada!
Kode di atas memastikan fungsionalitas tooltips. Mereka ditampilkan di layar, tetapi cukup sulit dipisahkan dari teks umum. Tidak ada skema warna yang membuat teks tooltip menonjol di halaman.
Atur skema warna untuk tooltips/Kode berikut menetapkan skema warna untuk masing-masing dari lima gaya tooltip.
Setelah mengubah kode halaman dan memperbaruinya di browser, tooltips akan ditampilkan saat Anda mengarahkan mouse ke link hampir sama di semua browser.
Kode CSS untuk skema warna .classic ( background: #FFFFAA; border: 1px solid #FFAD33; ) .critical ( background: #FFCCAA; border: 1px solid #FF3334; ) .help ( background: #9FDAEE; border: 1px solid # 2BB0D7; ) .info ( latar belakang: #9FDAEE; batas: 1px padat #2BB0D7; ) .peringatan ( latar belakang: #FFFFAA; batas: 1px padat #FFAD33; )Kode CSS sangat sederhana, tetapi memberikan tampilan tooltip yang bagus dan melakukan tugasnya di mana saja. Skema warna dapat diubah sesuai kebijaksanaan Anda.
Beberapa sentuhan CSS3 untuk tampilan tooltip tingkat lanjutSebelum kita menyelesaikan tutorial ini, kita akan menambahkan beberapa baris kode CSS3 untuk menambahkan efek visual ke tooltips kita. Mari atur sudut membulat menggunakan properti border-radius dan tambahkan beberapa dimensi menggunakan properti box-shadow.
Karena tidak satu pun dari properti ini didukung secara global, properti tersebut hanya akan berfungsi di beberapa versi browser terbaru. Namun jika berfungsi, tooltipnya akan terlihat rapi dan seksi!
Mari tambahkan kode di bawah ini ke rentang selector.tooltip:hover dan segarkan halaman.
Efek visual untuk batas, bayangan, dan transparansi mengangkat tooltip di atas teks halaman dan membuat informasi kontras dan mudah dibaca.
Anda mungkin memperhatikan bahwa tidak hanya properti CSS3 resmi yang digunakan, tetapi juga ekstensi untuk Mozilla dan WebKit.
Properti CSS tambahan untuk radius batas browser baru: 5px 5px; -moz-batas-radius: 5px; -radius-perbatasan webkit: 5px; bayangan kotak: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-kotak-bayangan: 5px 5px rgba(0, 0, 0, 0.1); -moz-kotak-bayangan: 5px 5px rgba(0, 0, 0, 0.1);
Tutorial ini menunjukkan bahwa meningkatkan antarmuka tidak memerlukan banyak usaha. Selain itu, ada baiknya meninjau pengalaman menggunakan CSS, yang dapat berguna dalam menetapkan tingkat interaktivitas baru untuk aplikasi web.
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.
Pada artikel ini, saya pikir saya akan mulai dengan hal yang paling primitif, menampilkan tooltip menggunakan title , yang tidak dapat diformat dengan cara apa pun, tapi 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.
Cara sederhana dengan desain, saat mengarahkan kursor.Ini tidak lebih rumit dari metode yang saya lewatkan. Hanya sebagai pengganti atribut title saya akan menggunakan data-title dan desain menggunakan 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 secara alami dapat mendesain tampilan dadu sesuai keinginan.
Keterangan alat saat mengarahkan kursor.Ini mungkin cara paling populer untuk mengimplementasikan fitur ini. Setidaknya itulah yang paling sering saya gunakan.
? ini adalah tip desain
Pada contoh ini saya juga tidak melihat sesuatu yang istimewa, melainkan lebih, namun hasilnya akan lebih baik meskipun tanpa menggunakan atribut data-title. Wadah 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;) /* Mendesain elemen tersembunyi default */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background-color : # 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) */ .hover + .hidden:before (konten: " "; posisi: absolut; atas: 98%; kiri: 10%; margin-kiri: -5px; lebar batas: 5px; gaya batas: padat; tinggi: 0; : 7px solid #fff; border-color: #fff transparan transparan; z-index: 2;) /* Dekorasi tambahan untuk elemen tersembunyi (opsional) */ .hover + .hidden :after (content: " "; position: absolut; atas: 100%; kiri: 10%; margin-kiri: -5 piksel; lebar batas: 5 piksel; gaya batas: padat; 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 hover */ .hover:hover + .hidden(display: block;)
Kedua opsi ini dapat digunakan di situs web Anda untuk menampilkan tooltip saat Anda mengarahkan kursor.
Ada dua metode lagi, tetapi hampir sama, hanya saja elemen tersebut akan muncul ketika Anda mengklik elemen yang selalu ditampilkan di situs.
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 agar metode ini berfungsi, perlu untuk 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 mengubah kelas semu menjadi fokus .
/* 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.
Keterangan alat saat diklik.Metode klik ini juga akan lebih relevan jika Anda perlu memformat tooltip sedikit lebih baik daripada opsi sebelumnya.
? ini adalah tip desain
Dan desain dadu yang sebenarnya:
/* mengatur posisi relatif ke wadah */ .block(position:relative;) /* Mendesain elemen tersembunyi default */ .hidden (display: none; position: absolute; bottom: 130%; left: 0px; background-color : # 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%; margin-kiri: -5px; lebar batas: 5px; gaya batas: padat; tinggi: 0; : 7px solid #fff; border-color: #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: padat; 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.
Pelajaran video - Tooltip tanpa skrip.Itu saja untukku. Semoga sukses untuk semuanya.
Memuat...