Artikel ini akan mendemonstrasikan tooltip menggunakan JavaScript biasa.
Bagaimana Cara Membuat Tooltip JavaScript Biasa?
Untuk membuat tooltip menggunakan JavaScript, gunakan tombol “ gerakan mouse ' Dan ' mouseout ” acara. Ikuti contoh yang diberikan di bawah ini untuk pemahaman yang lebih baik.
Contoh 1: Tooltip Menggunakan JavaScript
Dalam contoh yang diberikan, kami akan membuat tooltip dalam JavaScript murni dan juga menata tooltip menggunakan ' gaya ” atribut.
Pertama, buat teks di mana kita ingin menampilkan tooltip pada event mouseover:
< id h5 = 'teks' > Linux h5 >
Dapatkan teks tempat tooltip akan muncul menggunakan “ getElementById() ' metode:
dimana lh = dokumen. getElementById ( 'teks' ) ;
Sekarang, panggil ' addEventListener() ” metode dengan melewati “ gerakan mouse ” acara dan fungsi() sebagai parameter. Pada fungsi yang telah ditentukan, pertama kita akan membuat tooltip dengan membuat “ div ”, atur teks yang akan ditampilkan di hover, dan atur beberapa gaya tooltip menggunakan tombol “ gaya ” atribut. Terakhir, tambahkan tooltip menggunakan “ tambahkanAnak() ' metode:
lh. addEventListener ( 'tikus ke atas' , fungsi ( ) {adalah keterangan alat = dokumen. createElement ( 'div' ) ;
keterangan alat. innerHTML = 'Situs web terbaik untuk mempelajari keterampilan' ;
keterangan alat. gaya . visibilitas = 'bisa dilihat' ;
keterangan alat. gaya . posisi = 'mutlak' ;
keterangan alat. gaya . warna latar belakang = 'rgb(107, 101, 101)' ;
keterangan alat. gaya . lapisan = '5px' ;
keterangan alat. gaya . borderRadius = '3px' ;
keterangan alat. gaya . warna = 'putih' ;
keterangan alat. gaya . kiri = 'lima puluh%' ;
keterangan alat. gaya . lebar = '200px' ;
dokumen. tubuh . appendChild ( keterangan alat ) ;
} ) ;
Di sini, gunakan ' mouseout ” acara yang akan menghapus tooltip sementara kursor akan menjauh dari teks:
lh. addEventListener ( 'mouse out' , fungsi ( ) {
dokumen. tubuh . hapusAnak ( keterangan alat ) ;
} ) ;
Keluaran
Contoh 2: Tooltip Menggunakan JavaScript Dengan CSS
Anda juga dapat membuat tooltip dalam JavaScript dengan CSS.
Untuk melakukannya, buat area untuk menampilkan teks tooltip menggunakan tag dan tetapkan id “ #tipAlatsaya ”:
< rentang id = 'tipalatsaya' > menjangkau >Dapatkan referensi teks dan tooltip menggunakan “ getElementById() ' metode:
dimana lh = dokumen. getElementById ( 'teks' ) ;adalah keterangan alat = dokumen. getElementById ( 'tipalatsaya' ) ;
Panggil tooltip di “ gerakan mouse ” dengan menyetel teks dalam fungsi menggunakan tombol “ innerHTML ' Properti:
lh. addEventListener ( 'tikus ke atas' , fungsi ( ) {keterangan alat. gaya . visibilitas = 'bisa dilihat' ;
keterangan alat. innerHTML = 'Situs web terbaik untuk mempelajari keterampilan' ;
} ) ;
Sembunyikan tooltip di “ mouseout ” acara dengan menyetel “ visibilitas ” properti ke “ tersembunyi ”:
lh. addEventListener ( 'mouse out' , fungsi ( ) {keterangan alat. gaya . visibilitas = 'tersembunyi' ;
} ) ;
Buat id “ #tipAlatsaya ” di style sheet yang akan memberi style pada tooltip:
#tipAlatsaya {visibilitas : tersembunyi ;
lebar : 200px ;
Dengan - indeks : 1 ;
latar belakang - warna : rgb ( 107 , 101 , 101 ) ;
teks - meluruskan : tengah ;
warna : putih ;
lapisan : 5px 0 ;
berbatasan - radius : 3px ;
kiri : lima puluh %;
}
Seperti yang Anda lihat, tooltip telah berhasil diterapkan pada teks:
Bagaimana Cara Membuat Tooltip Menggunakan HTML dan CSS?
Anda juga dapat membuat tooltip tanpa JavaScript. Dalam file HTML, buat teks “ Linux ”, di mana tooltip akan ditampilkan saat melayang di atasnya. Buat elemen untuk mengatur teks untuk tooltip di dalam tag heading/text :
Linux
< menjangkau kelas = 'teks keterangan alat' >
Sebuah platform untuk belajar keterampilan
menjangkau >
h5 >
Di lembar gaya, buat kelas atau id yang akan ditetapkan ke elemen HTML. Di sini, kita akan membuat kelas “ keterangan alat ” yang ditugaskan ke tajuk:
. keterangan alat {posisi : relatif ;
menampilkan : Di barisan - memblokir ;
}
Tentukan kelas “ tooltiptext ” untuk menata teks tooltip dan menetapkannya sebagai HTML “
visibilitas : tersembunyi ;
lebar : 150px ;
latar belakang - warna : rgb ( 107 , 101 , 101 ) ;
warna : #fff ;
teks - meluruskan : tengah ;
lapisan : 5px 0 ;
berbatasan - radius : 3px ;
posisi : mutlak ;
Dengan - indeks : 1 ;
dasar : 125 %;
kiri : lima puluh %;
batas - kiri : - 60px ;
kegelapan : 0 ;
transisi : opasitas 0,3 detik ;
}
Mengatur ' melayang ' efek dengan ' keterangan alat ” untuk menampilkan tooltip pada efek hover:
. keterangan alat : arahkan . tooltiptext {visibilitas : bisa dilihat ;
kegelapan : 1 ;
}
Keluaran
Kami telah menyusun semua instruksi yang diperlukan yang relevan dengan tooltip JavaScript biasa.
Kesimpulan
Untuk membuat tooltip menggunakan JavaScript, gunakan tombol “ gerakan mouse ' Dan ' mouseout ”, yang menampilkan tooltip saat mengarahkan kursor ke elemen dan menyembunyikannya saat peristiwa mouseout dipicu. Untuk menata tooltip, gunakan “ gaya ” atribut dalam JavaScript. Dalam artikel ini, kami mendemonstrasikan contoh terbaik untuk membuat tooltip menggunakan JavaScript biasa, JavaScript dengan CSS, dan tooltip tanpa JavaScript.