Implementasi css murni (tanpa skrip) Efek prompt teks tooltip Html yang penting

Analisis proses eksekusi. Gerakkan mouse ke dalam node untuk mendeteksi apakah node tersebut ada untuk mengaktifkan implementasi tooltip (nama kelas, atribut, dll.). Mendeteksi topik dan lokasi (nama kelas, atribut, dll.). gelembung untuk belajar dari orang lain.

Pertama-tama mari kita lihat gaya tooltip elemen-ui

Tentunya posisi bubble ditambahkan melalui script javascript

Tanpa basa-basi lagi, mari kita tentukan beberapa ekspektasi. Tidak diperlukan skrip JavaScript. Implementasi CSS murni tidak memerlukan penambahan elemen baru** (menggunakan elemen semu setelah dan sebelum)** Tidak perlu pencocokan nama kelas, langsung menggunakan pemilih atribut** ([attr ])** Mendukung gaya default** (bila tag tidak menentukan tema dan posisi)** Imperatif** (mendefinisikannya langsung di tag, lalu serahkan ke css untuk pencocokan)** Gunakan sass untuk mengimplementasikan tema dan posisi pengembangan bubble Preprocessor (siswa yang belum paham dapat mengubahnya menjadi css ) spesifikasi arahan definisi html

 <button tooltip='Saya seorang yang menyukai konten' effect='light' position='top-left'>Kiri Atas</button> 

• tooltip — konten yang ditampilkan oleh gelembung;
• efek — tema gelembung (gelap / terang), default gelap;
• penempatan — posisi gelembung relatif terhadap elemen induk (atas / kiri atas/ kanan atas / kanan / kanan atas/ kanan bawah...), default atas;

Tulis beberapa tombol terlebih dahulu

Elemen referensi gaya-ui

 <div class=container> <div class=top> <button tooltip=top positioning=top-left effect=light>kiri atas</button> <button tooltip=kiri atas penempatan kiri atas=atas>atas</button> < button tooltip=penempatan kanan atas=kanan atas>kanan atas</button> </div> <div class=kiri> <button tooltip=kiri atas kiri atas kiri atas kiri atas kiri atas kiri atas kiri atas kiri atas penempatan=kiri-atas>kiri atas</button> <button tooltip=left position=left effect=light>kiri</button> < button tooltip=penempatan kiri dan kanan=kiri-bawah >Kiri bawah</button> </div> <div class=kanan> <button tooltip=kanan atas kanan atas kanan atas kanan atas kanan atas kanan atas kanan atas kanan atas penempatan=kanan-atas>kanan atas</button> <button tooltip=right positioning=right effect=light>kanan</button> < button tooltip=kanan bawah penempatan=kanan-bawah> Kanan bawah</button> </div> <div class=bottom> <button tooltip=kiri bawah kiri bawah penempatan=kiri bawah>kiri bawah</button> <button tooltip=penempatan bawah=efek bawah=cahaya>bawah</button> <button tooltip=kanan bawah penempatan=kanan bawah>kanan bawah</button> </div></div>

hover memantau pergerakan mouse masuk dan keluar, **[tooltip]** mencocokkan label dengan atribut ini, setelahnya berbentuk gelembung, dan sebelumnya berbentuk segitiga

 /* Mencocokkan elemen dengan atribut tooltip */[tooltip] { position: relative; /* Gaya gelembung default*/ &::after { display: none content: attr(tooltip); / & ::before { display: none; content: ''; } /* Gerakkan mouse ke dalam elemen untuk menampilkan gelembung dan segitiga */ &:hover { &::after { display: block; tampilan: blok; } }}

Sekarang efeknya akan efektif setelah menggerakkan mouse ke dalamnya

Agar dapat melihat efeknya dengan mudah, pengujian ini dapat memblokir gelembung dan segitiga secara default.

 /* Gaya gelembung default*/&::after { display: block; content: attr(tooltip);}/* Gaya default segitiga*/&::before { display: block content: '';}

Dampak yang terjadi saat ini adalah sebagai berikut

Tampilan inti tentu saja diatur ke posisi absolut

 /* Gaya default gelembung */&::setelah { tampilan: blok; konten: attr(keterangan alat); posisi: spasi putih: nowrap overflow: tersembunyi; lebar: 200px; radius batas: 4px; bayangan kotak: 0 10px 20px -5px rgba(0, 0, 0, 0.4); z-index: 100; @extend .tooltip-theme-dark; /* Mewarisi tema default (teks putih dengan latar belakang hitam) */ }/* Gaya default segitiga */&::before { tampilan: blok; konten : ''; posisi: absolut; batas: 5px transparan solid; indeks-z: 100; */}

Dampak yang terjadi saat ini adalah sebagai berikut

Tentukan masing-masing dua tema

 $putih: #fff;$hitam: #313131;/* Tema gelembung*/.tooltip-theme-dark { warna: $putih; warna latar: $hitam;}.tooltip-tema-cahaya { warna: $hitam; warna-latar belakang: $putih; batas: 1 piksel solid $hitam;}/* tema segitiga*/.tema-segitiga-gelap { warna-batas atas: $hitam;}.tema-segitiga-cahaya { border-top-color: $black; /* Sama seperti gelap untuk saat ini*/}

 /* Posisi gelembung*//*----Atas----*/.tooltip-placement-top { bawah: kalk(100% + 10 piksel kiri: 50%; transformasi: terjemahan(-50%, 0 );}.tooltip-penempatan-kanan atas { bawah: kalk(100% + 10 piksel kiri: 100%; transformasi: terjemahan(-100%, 0)}.tooltip-placement-top-left { bawah: calc(100% + 10px); --*/.triangle-placement-top { bawah: calc(100% + 5px kiri: 50%; transform: Translate(-50%, 0);}.triangle-placement-top-left { bawah: kalk(100% + 5px); kiri: 10px;}.penempatan-segitiga-kanan atas { bawah: kalk(100% + 5px kanan: 10px;}

Ini juga merupakan kode inti. Gunakan pemilih atribut untuk mencocokkan nilai pada label, lalu atur gaya yang berbeda.

Gelembung yang cocok, tema segitiga

 &[efek=cahaya] { &::setelah { @extend .tooltip-theme-light; } &::sebelum { @extend .triangle-theme-light;

Cocokkan posisi gelembung dan segitiga, 12 posisi

 @setiap $penempatan di atas,kanan atas,kiri atas,kanan,kanan atas,kanan bawah,bawah,kanan bawah,kiri bawah,kiri,kiri atas,kiri bawah { &[penempatan=# {$penempatan}] { &::setelah { @extend .tooltip-placement-#{$placement} } &::sebelum { @extend .triangle-placement-#{$placement};

Jika label tidak memiliki atribut penempatan/kosong, posisi teratas akan diwarisi secara default.

 &:tidak([penempatan]),&[penempatan=] { &::setelah { @extend .tooltip-placement-top; } &::before { @extend .triangle-placement-top;

Dampak yang terjadi saat ini adalah sebagai berikut

Mari buat teks lebih panjang dan tambahkan display:none ke gaya default gelembung dan segitiga.

Dibagi menjadi empat arah, atas, bawah, kiri, dan kanan, empat animasi

 @keyframes anime-top { dari { opacity: .5; bawah: 150%; }}@keyframes anime-bottom { dari { opacity: .5; atas: 150%; .5; kanan: 150%; }}@keyframes anime-kanan { dari { opasitas: .5; kiri: 150% }}

Cocokkan posisi gelembung untuk menentukan animasi mana yang akan dijalankan. Gunakan **[attr^=]** untuk memilih.

 /* Atur animasi*/@setiap $penempatan di atas, kanan, bawah, kiri { &[penempatan^=#{$penempatan}] { &::setelah, &::sebelum { animasi: anime-#{$penempatan} 300ms ease-out ke depan;

Efek akhirnya adalah sebagai berikut

Terlampir adalah alamat codepen codepen.io/anon/pen/yR…

Di atas adalah implementasi CSS murni (tanpa skrip) efek prompt teks arahan Html yang diperkenalkan oleh editor. Saya harap ini akan membantu Anda waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!

Jika menurut Anda artikel ini bermanfaat bagi Anda, silakan cetak ulang, harap sebutkan sumbernya, terima kasih!