Artikel ini akan menunjukkan petua alat menggunakan JavaScript biasa.
Bagaimana untuk Mencipta Petua Alat JavaScript Biasa?
Untuk membuat petua alat menggunakan JavaScript, gunakan ' tetikus ” dan “ keluar tetikus ” peristiwa. Ikuti contoh yang diberikan di bawah untuk pemahaman yang lebih baik.
Contoh 1: Petua Alat Menggunakan JavaScript
Dalam contoh yang diberikan, kami akan mencipta petua alat dalam JavaScript tulen dan juga menggayakan petua alat menggunakan ' gaya ” atribut.
Mula-mula, buat teks di mana kita ingin menunjukkan petua alat pada acara alih tetikus:
< id h5 = 'teks' > Linux h5 >
Dapatkan teks di mana petua alat akan dipaparkan menggunakan “ getElementById() ' kaedah:
di mana lh = dokumen. getElementById ( 'teks' ) ;
Sekarang, panggil ' addEventListener() ' kaedah dengan melepasi ' tetikus ” acara dan fungsi() sebagai parameter. Dalam fungsi yang ditakrifkan, pertama, kita akan mencipta petua alat dengan mencipta ' div elemen ”, tetapkan teks yang akan ditunjukkan pada tuding, dan tetapkan beberapa penggayaan petua alat menggunakan “ gaya ” atribut. Akhir sekali, tambahkan petua alat menggunakan ' appendChild() ' kaedah:
lh. addEventListener ( 'tetikus ke atas' , fungsi ( ) {adalah petua alat = dokumen. createElement ( 'div' ) ;
petua alat. innerHTML = 'Laman web terbaik untuk mempelajari kemahiran' ;
petua alat. gaya . keterlihatan = 'kelihatan' ;
petua alat. gaya . kedudukan = 'mutlak' ;
petua alat. gaya . warna latar belakang = 'rgb(107, 101, 101)' ;
petua alat. gaya . padding = '5px' ;
petua alat. gaya . sempadanRadius = '3px' ;
petua alat. gaya . warna = 'putih' ;
petua alat. gaya . dibiarkan = 'lima puluh%' ;
petua alat. gaya . lebar = '200px' ;
dokumen. badan . appendChild ( petua alat ) ;
} ) ;
Di sini, gunakan ' keluar tetikus ” peristiwa yang akan mengalih keluar petua alat sementara kursor akan menjauhi teks:
lh. addEventListener ( 'tetikus keluar' , fungsi ( ) {
dokumen. badan . keluarkanAnak ( petua alat ) ;
} ) ;
Pengeluaran
Contoh 2: Petua Alat Menggunakan JavaScript Dengan CSS
Anda juga boleh membuat petua alat dalam JavaScript dengan CSS.
Untuk berbuat demikian, buat kawasan untuk menunjukkan teks petua alat menggunakan teg dan tetapkan id “ #myTooltip ”:
< id span = 'myTooltip' > rentang >Dapatkan rujukan teks dan petua alat menggunakan ' getElementById() ' kaedah:
di mana lh = dokumen. getElementById ( 'teks' ) ;adalah petua alat = dokumen. getElementById ( 'myTooltip' ) ;
Panggil petua alat pada “ tetikus acara ” dengan menetapkan teks dalam fungsi menggunakan “ innerHTML ” harta:
lh. addEventListener ( 'tetikus ke atas' , fungsi ( ) {petua alat. gaya . keterlihatan = 'kelihatan' ;
petua alat. innerHTML = 'Laman web terbaik untuk mempelajari kemahiran' ;
} ) ;
Sembunyikan petua alat pada “ keluar tetikus ' acara dengan menetapkan ' keterlihatan ” harta kepada “ tersembunyi ”:
lh. addEventListener ( 'tetikus keluar' , fungsi ( ) {petua alat. gaya . keterlihatan = 'tersembunyi' ;
} ) ;
Buat id ' #myTooltip ” dalam helaian gaya yang akan menggayakan petua alat:
#myTooltip {keterlihatan : tersembunyi ;
lebar : 200px ;
Dengan - indeks : 1 ;
latar belakang - warna : rgb ( 107 , 101 , 101 ) ;
teks - selaraskan : pusat ;
warna : putih ;
padding : 5px 0 ;
sempadan - jejari : 3px ;
dibiarkan : lima puluh %;
}
Seperti yang anda lihat bahawa petua alat telah berjaya dilaksanakan pada teks:
Bagaimana untuk Mencipta Petua Alat Menggunakan HTML dan CSS?
Anda juga boleh membuat petua alat tanpa JavaScript. Dalam fail HTML, buat teks ' Linux ”, di mana petua alat akan ditunjukkan semasa melayang di atasnya. Cipta elemen untuk menetapkan teks bagi petua alat di dalam teg tajuk/teks :
Linux
< rentang kelas = 'teks tip alat' >
Platform untuk mempelajari kemahiran
rentang >
h5 >
Dalam helaian gaya, buat kelas atau id yang akan diberikan kepada elemen HTML. Di sini, kami akan membuat kelas ' petua alat ” yang diberikan kepada tajuk:
. petua alat {kedudukan : relatif ;
paparan : dalam barisan - blok ;
}
Tentukan kelas ' teks petua alat ” untuk menggayakan teks petua alat dan memberikannya HTML “ ” tag:
. teks petua alat {keterlihatan : tersembunyi ;
lebar : 150px ;
latar belakang - warna : rgb ( 107 , 101 , 101 ) ;
warna : #F F F ;
teks - selaraskan : pusat ;
padding : 5px 0 ;
sempadan - jejari : 3px ;
kedudukan : mutlak ;
Dengan - indeks : 1 ;
bawah : 125 %;
dibiarkan : lima puluh %;
margin - dibiarkan : - 60px ;
kelegapan : 0 ;
peralihan : kelegapan 0.3s ;
}
Tetapkan “ berlegar ” kesan dengan “ petua alat ” untuk menunjukkan petua alat pada kesan tuding:
. petua alat : berlegar . teks petua alat {keterlihatan : nampak ;
kelegapan : 1 ;
}
Pengeluaran
Kami telah mengumpulkan semua arahan yang diperlukan yang berkaitan dengan petua alat JavaScript biasa.
Kesimpulan
Untuk membuat petua alat menggunakan JavaScript, gunakan ' tetikus ” dan “ keluar tetikus ” peristiwa, yang menunjukkan petua alat pada tuding pada elemen dan menyembunyikannya apabila acara keluar tetikus dicetuskan. Untuk menggayakan petua alat, gunakan ' gaya ” atribut dalam JavaScript. Dalam artikel ini, kami menunjukkan contoh terbaik untuk mencipta petua alat menggunakan JavaScript biasa, JavaScript dengan CSS dan petua alat tanpa JavaScript.