Tip alat PHP. Tooltip HTML dan implementasinya. Apa yang ada di bawah tenda kita
Dari penulis: Halo. Tooltip 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 dalam HTML dengan berbagai cara.
Petunjuk standarSecara default, atribut title bertanggung jawab untuk menampilkan teks penjelasan. Dapat digunakan untuk berbagai elemen, namun biasanya hanya digunakan pada gambar untuk menjelaskan apa yang ditampilkannya.
Pada salah satu artikel sebelumnya, saya menggunakan gambar harimau untuk menunjukkan cara kerja dengan ukuran gambar. Jika Anda tidak keberatan, saya akan menggunakan gambar ini lagi. Jadi, untuk menampilkan petunjuk, Anda hanya perlu menambahkan atribut judul dan menulis teks yang diinginkan di dalamnya.
< img src = "tiger.jpg" title = "Ini adalah harimau" > |
Bisa berupa satu kata atau beberapa kalimat. Dan inilah tampilannya:
Petunjuk tersebut muncul dengan lancar, tidak segera setelah melayang, tetapi setelah beberapa waktu. Ini adalah perilaku default.
Masalah utama dengan tooltip seperti itu adalah tidak dapat diubah gayanya. Bagaimana cara mengatasi masalah ini? Kita harus memberikan petunjuk dengan cara lain. Sekarang saya akan menunjukkan kepada Anda beberapa.
Metode css murniCara yang sangat menarik yang memungkinkan Anda menampilkan petunjuk gambar dengan indah. Markup HTMLnya sederhana, hanya gambar yang perlu diapit dalam wadah blok, yang akan kita tetapkan pengidentifikasinya sehingga nanti kita bisa merujuknya dalam gaya:
< div id = "tiger" data - name = "Суматранский тигр" > < img src = "tiger.jpg" > < / div > |
Satu-satunya hal yang mungkin tidak jelas bagi Anda di sini adalah atribut data-name. Masalahnya adalah ini disebut atribut data, yang dengan sendirinya tidak melakukan apa pun, tetapi nilainya dapat digunakan dalam css dan javascript, yang membuatnya berguna dalam beberapa kasus. Anda akan melihat ini selanjutnya.
Jadi, pertama-tama, mari kita jelaskan gaya wadahnya. Kita memerlukan pemosisian relatif karena kita pasti akan memposisikan blok dengan teks penjelasan sehingga pemosisian terjadi relatif terhadap blok induk, dan bukan seluruh halaman.
#harimau( posisi: relatif; tampilan: blok sebaris; )
#harimau( posisi: relatif; tampilan: sebaris - blok; |
Tampilan garis blok akan mencegah blok (dan dengan itu blok dengan tooltip yang akan kita buat) meregang ke seluruh lebar jendela. Yang tersisa hanyalah membuat petunjuk itu sendiri. Dalam CSS, sangat mudah untuk melakukan ini menggunakan elemen semu. Seperti ini:
#tiger:hover:after ( konten: attr(nama-data); posisi: absolut; kiri: 0; bawah: 0; latar belakang: rgba(5,13,156,.55); warna: #fff; perataan teks: tengah ; keluarga font: kursif; ukuran font: 14 piksel; lebar: 100% )
#tiger:hover:setelah ( isi : attr (data - nama ) ; posisi: mutlak; kiri: 0; bawah: 0; latar belakang: rgba(5, 13, 156, .55); warna : #fff; teks - rata: tengah; font - keluarga : kursif ; ukuran font: 14px; bantalan: 3px 0; lebar: 100%; |
Ada banyak kode, tapi tidak ada yang rumit di sini. Pemilih #tiger:hover:after memiliki arti sebagai berikut: ketika kita mengarahkan kursor ke blok dengan gambar, kita perlu membuat elemen semu setelahnya (dan kemudian aturannya dicantumkan dalam kurung kurawal). Properti content: attr(data-name) menetapkan nilai teks blok. Itu akan sama dengan apa yang tertulis di atribut data-name dari blok pembungkus gambar.
Tooltip ini muncul saat Anda mengarahkan kursor ke gambar, tetapi tidak seperti yang standar, tooltip ini muncul secara tiba-tiba, dan kemunculannya sendiri langsung terjadi pada saat Anda mengarahkan kursor. Dalam hal ini, transisi yang mulus tidak dapat diterapkan, karena transisi yang mulus tidak didukung untuk elemen semu.
Metode 2. Css murni dan tampilan halusNamun, dengan sedikit menulis ulang kode, Anda dapat memperoleh tampilan tooltip 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 apa pun yang nyaman dan mengulangi semuanya setelah saya. Benar, untuk ini Anda masih perlu menyertakan file gaya, meskipun gaya juga dapat ditulis dalam html dalam tag
Jadi, kode untuk contoh ini akan sedikit berbeda, dan itu karena kita tidak akan menggunakan elemen semu. Karena hal inilah tidak mungkin menerapkan perubahan yang mulus. Kali ini kodenya akan terlihat seperti ini:
Harimau Sumatera
< div id = "tiger2" > < img src = "tiger.jpg" > < div class = "text" >Harimau Sumatera< / div > < / div > |
Kode CSS tidak mengalami perubahan besar apa pun:
#tiger2( posisi: relatif; tampilan: inline-block; ) #tiger2 .text ( transisi: semua 0,6 detik; opacity: 0; posisi: absolut; kiri: 0; bawah: 0; latar belakang: rgba(5,13,156,. 55); warna: #fff; font-family: kursif; bantalan: 3px 0;
#harimau2( posisi: relatif; tampilan: sebaris - blok; #harimau2 .teks ( transisi: semua 0,6 detik; transformasi:skala(0); #tiger2:hover.teks( opacity: 1; |
Kami hanya menghapus properti konten, karena hanya didukung oleh elemen semu. Kami menambahkan properti transisi, yang menciptakan transisi keadaan mulus. Nah, opacity: 0 akan memberikan transparansi penuh pada blok tooltip kita, sehingga tidak akan terlihat di halaman.
Saat mengarahkan kursor ke sebuah blok, sekarang cukup mengembalikan transparansi normal ke blok tersebut dengan tooltip. Siap. Anda dapat memeriksa apakah elemen tersebut muncul dengan lancar.
Menggunakan css3 Anda dapat menyembunyikan elemen dengan cara lain. Misalnya dengan menggunakan transformasi. Ganti transparansi penuh dengan properti ini: transform: scale(0) dan ukuran blok akan dikurangi menjadi nol, sehingga tidak akan muncul di layar. Saat Anda mengarahkan kursor ke blok yang berisi gambar, Anda harus mengembalikan ukuran normal seperti ini: transform: skala(1). Dalam hal ini, efek penampilan akan terlihat semakin cantik. Anda dapat melihatnya sendiri.
Seperti yang Anda lihat, di css tooltip juga bisa muncul perlahan dengan efek yang indah.
metode lainjQuery dapat memberi Anda lebih banyak kemungkinan. Dengan menggunakan perpustakaan ini, Anda dapat menulis kode untuk menampilkan petunjuk sendiri atau menemukan beberapa plugin yang sudah mengimplementasikannya.
Misalnya saja framework Bootstrap juga memiliki banyak komponen yang sudah jadi, salah satunya adalah tooltips. Anda dapat melihat dokumentasi kerangka kerja untuk contoh kode yang memungkinkan Anda membuat petunjuk yang sama dan menggunakannya. Tidak perlu menghubungkan seluruh Bootstrap; biasanya Anda hanya dapat meninggalkan komponen seperti tooltips, unduh dan sambungkan saja.
Secara umum, hari ini saya menunjukkan kepada Anda cara-cara di CSS untuk membuat tooltip yang indah dengan tampilan yang tajam dan halus; selain itu, Anda memiliki Bootstrap dan jQuery di gudang senjata Anda. Pilih apa saja dan terapkan tips menarik dan indah di situs Anda!
Hari ini kita akan membuat tooltips menggunakan CSS. Keterangan alat adalah apa yang Anda lihat saat mengarahkan kursor, misalnya, tautan jika atribut judul berisi deskripsinya.
Tooltip dapat digunakan untuk tautan dan gambar.
Dalam bentuk mentahnya, tooltipnya terlihat seperti ini:
Tooltip ditampilkan menggunakan metode sistem standar menggunakan atribut title.
Kode tautan standar dengan tooltip tanpa hiasan:
Tautan
CSS keterangan alatAnda dapat menata tooltip Anda menggunakan CSS. Kami akan melihat tiga opsi keterangan alat di CSS.
Sayangnya, tidak ada “resep” CSS untuk desain judul, jadi kita harus menambahkan atribut tambahan, menentukan desainnya dan menambahkannya ke link/kode gambar yang ingin kita buat menjadi indah. keterangan alat CSS.
Pada contoh pertama yang akan kita lakukan keterangan alat CSS di atas gambar di bagian paling bawah.
Untuk melakukan ini, kita akan menggunakan dua atribut: gambar, dan agar tooltip berfungsi, kita akan menggunakan ::after dan data-text untuk menampilkan teks tooltip.
Gaya CSS untuk contoh ini:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | .image ( display : inline-block ; position : relative ; ) .image : hover :: after ( content : attr (data-text) ; /* Menampilkan teks tooltip */ position : absolute ; left : 0 ; right : 0 ; bawah : 0px ; /* Posisi tooltip */ z-index : 1 ; /* Menampilkan tooltip di atas elemen lainnya */ background : rgba ( 0 , 255 , 102 , 0.6 ) ; dan tingkat transparansinya */ warna : #fff ; /* Warna teks */ text-align : center ; /* Ratakan teks ke tengah */ font-family : Arial, sans-serif ; -ukuran : 11px / * Ukuran teks tooltip */ padding : 5px 10px ; /* Margin */ batas : 1px solid #333 ; |
Gambar ( tampilan: blok sebaris; posisi: relatif; ) .image:hover::after ( konten: attr(teks-data); /* Menampilkan teks keterangan alat */ posisi: absolut; kiri: 0; kanan: 0; bawah: 0px; /* Posisi tooltip */ z-index: 1; /* Menampilkan tooltip di atas elemen lain */ latar belakang: rgba(0,255,102,0.6); warna: # fff; /* Warna teks */ perataan teks: tengah; /* Ratakan teks ke tengah */ font-family: Arial, sans-serif; * Ukuran teks tooltip * / padding: 5px 10px; /* Margin */ batas: 1px solid #333;
| 1 | 
|
Hasil:
Desain ini tidak akan berfungsi untuk tautan, jadi kami akan menggunakan opsi yang sedikit berbeda untuk tautan tersebut.
Opsi pertama akan menampilkan tooltip di atas tautan.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .podskazka( tampilan : inline ; posisi : relatif ; ) .podskazka : hover : setelah ( latar belakang : #333 ; latar belakang : rgba (204 , 102 , 0 , .8) ; radius batas : 5px ; bawah : 26px ; warna : #fff ; konten : attr (judul) ; padding : 5px 15px ; posisi : absolut ; lebar : otomatis ; .podskazka : hover : sebelum ( /* Tambahkan panah di bagian bawah blok tooltip */ border : solid ; border- warna : #cc6600 transparan ; lebar batas : 6px 0 6px ; |
Podskazka( tampilan: sebaris; posisi: relatif;).podskazka:hover:after( latar belakang: #333; latar belakang: rgba(204,102,0,.8); radius batas: 5 piksel; bawah: 26 piksel; warna: #fff; content: attr(title); padding: 5px 15px; position: absolute; width: auto;).podskazka:hover:before( /* Tambahkan panah di bagian bawah blok tooltip */ border : solid; border-color: #cc6600 transparan; lebar batas: 6px 6px 0 6px;
Tautan
Dan opsi terakhir adalah menampilkan tooltip di bawah link. Opsinya mirip dengan yang sebelumnya, hanya tooltip yang ditampilkan di bawah.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .tooltip ( position : relative ; /* Jadikan elemen sebagai induk untuk tooltips */ kursor : bantuan ; ) .tooltip span ( position : absolute ; /* Keluarkan elemen dari alur */ margin-left : -30000px ; / * Dan sembunyikan jauh di balik tepi layar */ background-color : rgba (0 , 0 , 153 , .8) ; /* Latar belakang blok popup */ color : #fafafa ; padding : 10px /* Padding */ -webkit -border-radius: 5px ; /* Bulatkan sudut */ -moz-border-radius: 5px ; -khtml-border-radius: 5px ; Saat diarahkan */ margin-left : 0 ; /* Kembalikan blok dari tepi jauh ke tempatnya */ width : 250px ; /* Atur lebarnya */ z-index : 1000 ; paling atas */ atas : 30px ; */ kiri : 20px ; /* Padding kiri */ .tooltip span: setelah ( konten : "" ; /* Menambahkan konten */ lebar : 0 ; /* Menyembunyikannya, mengubahnya menjadi 0 */ tinggi : 0 ; batas- bawah : 10 piksel padat #000099 ; /* Gunakan batas bawah untuk mengatur warna dan tinggi segitiga */ border-right : 30px solid transparan ; /* Kanan - lebar segitiga di sebelah kanan */ posisi : absolut ; /* Posisi relatif terhadap blok induk */ top : -10px ; kiri: 10 piksel; ) |
Tooltip ( posisi: relatif; /* Jadikan elemen sebagai induk untuk tooltips */ kursor: bantuan;).rentang tooltip ( posisi: absolut; /* Keluarkan elemen dari alur */ margin-kiri: -30000px; /* Dan sembunyikan jauh di belakang tepi layar */ background-color: rgba(0,0,153,.8); /* Latar belakang blok popup */ color: #fafafa; * Padding */ -webkit-border- radius: 5px; /* Bulatkan sudut */ -moz-border-radius: 5px; -khtml-border-radius: 5px border-radius: 5px;).tooltip:hover span ( /* Saat mengarahkan kursor */ margin-kiri : 0; /* Mengembalikan blok dari tepi jauh layar ke tempatnya */ lebar: 250 piksel; /* Mengatur lebar */ z-index: 1000; /* Tempat di bagian paling atas */ /* Posisikan relatif terhadap blok induk */ top:30px ; /* Padding atas */ kiri:20px; /* Padding kiri */ ).tooltip span:after( content: ""; /* Menambahkan konten */ width:0; /* Menyembunyikannya, mengubahnya menjadi 0 */ height :0; border-bottom: 10px solid #000099; /border-right: 30px solid transparan; /* Kanan - lebar segitiga ke kanan */ posisi: absolut; /* Posisi relatif terhadap blok induk */ top:-10px; kiri:10 piksel;)
atau elemen HTML mana yang dapat memiliki tooltips
Bab ini berisi contoh tooltips dari area Hypertext Markup.
Di menu sebelah kiri Anda akan menemukan tutorial HTML yang modern dan sangat detail.
Mereka memungkinkan Anda membuat situs web dari awal, tetapi untuk saat ini, lihat sedikit lebih rendah.
Dalam bab ini kita akan melihat
Sebelum melanjutkan dengan petunjuk HTML, saya sarankan Anda membaca informasinya.
Ini mungkin menarik.
Tren Utama Internet Awal
Sejak tahun 1997, setelah munculnya browser pertama, beberapa konsumen secara aktif mengkhususkan diri dalam berbagai bidang Internet, serta di bidang teknologi informasi dan dukungan perangkat keras komputer. Banyak pengguna menjadi desainer web, mulai membuat situs web pribadi dan perusahaan, dan berpartisipasi dalam pembangunan jaringan komputer lokal. Dengan cara ini mereka mendidik diri mereka sendiri. Keadaan ini bertahan hingga hari ini. Saat ini sangat modis dan nyaman untuk memperoleh pengetahuan melalui World Wide Web. Saat ini dan khususnya pada pertengahan tahun 90-an abad lalu, negara-negara bekas sosialis membutuhkan spesialis pemrograman. Jika ada permintaan maka akan ada pasokan. Pemrogram dilatih secara massal - ada yang di universitas, ada yang di rumah di depan layar komputer. Di masa yang luar biasa ini, forum pemrograman semakin populer, tempat para muda dan non-spesialis bertukar pengalaman dan ide.
Keterangan alat untuk tautan HTMLSemuanya hampir sama di sini: atribut title="" mendefinisikan Keterangan alat HTML .
Alt="" pada gambar menentukan teks alternatif yang akan ditampilkan pada halaman jika gambar tidak ditampilkan.
Jangan bingung antara tooltip HTML dan teks alternatif, karena keduanya merupakan hal yang sangat berbeda.
Keterangan alat HTML untuk teksTooltip HTML berlaku untuk hampir semua elemen di halaman.
Dengan kata lain, title="" yang kita kenal dari contoh di atas dapat memiliki tag heading di semua level, tag paragraf, blok, gambar, dan elemen linier seperti . dan lain-lain.
Saya memiliki pengalaman menempatkan atribut title="" di tag judul dan tautan tingkat pertama.
Secara pribadi, saya menggunakan tooltips, tentu saja, sebagai bagian dari eksperimen amatir yang tak terhindarkan dalam optimasi mesin pencari teks situs web. Saya tidak berani menilai seberapa sukses eksperimen saya. Sejujurnya, hasil optimasi tersebut sulit dilacak, namun sangat mudah untuk berlebihan dengan kata kunci dan frase. Oleh karena itu, berhati-hatilah dan jangan berlebihan dalam berpromosi, karena Anda selalu berisiko dihukum oleh mesin pencari.
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 CSS3Menggunakan ekstensi yang sederhana namun efektif seperti properti border-radius dan box-shadow 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 dapat bereksperimen dengannya nanti 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 tooltips 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 ramping 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.
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.
Siapa pun yang tertarik dengan metode saya memecahkan masalah sederhana ini, saya bertanya di bawah kucing.
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!
