Membuat Popover dengan Javascript
halo teman teman kursus blog Source Code Aplikasi, semoga selalu sehat yah :D, sekarang ini kita akan belajar Merancang Popover dengan Javascript, guna popover ini sering digunakan ketika mouse mengarahkan ke element karenanya akan muncul pop. seperti contohnya, bagi lebih jelas mari kita praktekan yah teman teman.
pertama-tama tama teman teman buka text editor nya dan bikin 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 bikin 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 bagi kode javascript kalian dapat ketikan kode javascript berikut yah teman teman. ketikan sebelum tag penutup body.
<script>
let [button, span] = [
document.querySelector(‘button’),
document.querySelector(‘span’),
];
button.addEventListener(‘mouseenter’, (e)=> span.style.display = ‘block’);
button.addEventListener(‘mouseleave’, (e)=> span.style.display = ‘none’);
</script>
karenanya hasilnya seperti di bawah ini.
sebelum di hover. tak akan terjadi apa atau popup kita tak akan muncul
setelah di hover. popup akan muncul , begitupun ketika mouse meninggalkan element button pun popup akan hilang kembali atau display nya none.
seperti itu cara simpel Merancang Popover dengan Javascript , semoga temen teman tertarik dan jangan lupa di praktekan yah teman teman. semoga bermanfaat yah teman teman :D.
Sumber https://kursuswebsite.org
