Membuat Popover dengan Javascript

halo teman teman kursus website dumet school, semoga selalu sehat yah :D, sekarang kita akan belajar Membuat Popover dengan Javascript, fungsi popover ini sering digunakan ketika mouse mengarahkan ke element maka akan muncul pop. seperti contohnya, untuk lebih jelas mari kita praktekan yah teman teman.

pertama tama teman teman buka text editor nya dan buat struktur html berikut dan beri nama file dengan nama index. html dan ajangan lupa di save yah teman teman.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Popover JS</title>
</head>
<body>
	<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur commodi reprehenderit corporis nobis ex sed soluta consectetur adipisicing elit architecto tempora aliquam perferendis assumenda perspiciatis, natus temporibus eos eius in recusandae mollitia iure!</span>
	<button> Popover MouseEnter </button>
</body>
</html>

strukturnya sederhana kita hanya perlu tag span dan tag button. lalu kita buat css nya yah teman teman biar terlihat cantik.. 😀 ketikan kode css berikut yah teman teman.

button{
	background: salmon;
	color: #fff;
	padding:20px;
	border: 2px solid grey;
	text-transform: uppercase;
	width: 200px;
	display: block;
	margin: auto;
	margin-top: 50px;
	position: relative;
}
button:hover{
	box-shadow: 2px 2px 2px #333;
}
span{
	position: absolute;
	right: 400px;
	top:60px;
	background: #fff;
	z-index: 999;
	padding:20px;
	border: 1px solid grey;
	text-align: center;
	width: 500px;
	display: none;
	color: grey;
	font-family: arial;
}

setelah itu untuk kode javascript kalian bisa ketikan kode javascript berikut yah teman teman. ketikan sebelum tag penutup body.

button.addEventListener(‘mouseenter’, (e)=> span.style.display = ‘block’);
button.addEventListener(‘mouseleave’, (e)=> span.style.display = ‘none’);

</script>

maka hasilnya seperti di bawah ini.

sebelum di hover. tidak akan terjadi apa atau popup kita tidak akan muncul

sesudah di hover. popup akan muncul , begitupun ketika mouse meninggalkan element button pun popup akan hilang kembali atau display nya none.

seperti itu cara simpel Membuat Popover dengan Javascript , semoga temen teman tertarik dan jangan lupa di praktekan yah teman teman. semoga bermanfaat yah teman teman :D.

Kategori