CSS Only : Popover tanpa JavaScript

Popover merupakan suatu elemen tambahan yang bisa ditampilkan maupun disembunyikan berdasarkan trigger tertentu. Pada umumnya, popover ini dibuat dengan menggunakan JavaScript, bahkan popover.js salah satu package popover yang paling populer saat ini pun menggunakan JavaScript. Bootstrap yang merupakan salah satu framework design yang sangat populer saat ini pun menggunakan popover.js untuk meng-hanlde popover milik mereka.

Get Fhaladin Dev’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Sekarang pertanyaan nya adalah “Bisakah membuat popover hanya dengan CSS tanpa sentuhan Javascript sama sekali?”, Mari kita bahas…

Preview

Popover yang nanti akan kita buat kurang lebih terlihat seperti ini :

Popover preview

Struktur HTML

Pertama, mari kita buat struktur HTML nya terlebih dahulu

file index.html

Struktur CSS

Setelah selesain dengan HTML nya, sekarang mari kita buat CSS nya

file style.css

Sekarang coba perhatikan bagian ini :

<li class="list-item">
  <span>Dr. Strange</span>   
   
  <div class="alter-ego">      
    Hover Me          
    <span>Stephen Strange</span>
  </div>      
</li>

Bagian yang akan dijadikan popovernya adalah tag span yang ada di dalam tag div dengan class alter-ego. Secara default, tag span tersebut akan kita hide terlebih dahulu dengan memberikan style visibility: hidden;, seperti ini :

.alter-ego > span {  
  ...
  visibility: hidden;
  ...
}

Selanjutnya untuk menampilkan popover tersebut kita harus memberikan style visibility: visible; ketika tag <div class="alter-ego"> sedang di hover, seperti ini :

.alter-ego:hover > span {
  visibility: visible;
}

Lalu untuk mengatur posisinya, tag <div class="alter-ego"> harus diberikan style position: relatif;, lalu tag <span> yang ada di dalam nya kita berikan style position: absolute;, agar nantinya tag <span> tersebut bisa kita atur posisinya relatif terhadap tag parent nya yang merupakan <div class="alter-ego">.

...
.alter-ego {
  posittion: relatif;
  ...
}
.alter-ego > span {
  position: absolute;
  ...
}
...

Seandainya kita ingin mengatur posisi dari popover tersebut agar tidak di bawah, melainkan ingin di samping ataupun di atas, maka tinggal kita atur saja bagian ini :

.alter-ego > span { 
  ...
  top: 48px;
  left: 50%;
  transform: translate(-50%, -50%);  
  ...
}
.alter-ego > span::before {  
  ...
  top: -3px;
  left: 45%;
  transform: rotate(45deg) translate(0, -50%);
  ...
}

Dan selesai~ mudah bukan?
Untuk menampilkan popover hanya itu saja, sedangkan sisa style yang lain nya digunakan untuk merubah penampilan nya saja.

Kelebihan dan kekurangan

Membuat popover dengan hanya menggunakan CSS alias CSS only, tentu saja jauh lebih mudah dan lebih ringan jika dibandingkan dengan menggunakan javascript. Namun jika kita bandingkan secara fitur, tentu saja pembuatan popover dengan bantuan JavaScript bisa jauh lebih powerful, dikarenakan akan jauh lebih banyak kondisi yang bisa di-handle.

Selain itu pun, jika kita menggunakan JavaScript, kita tidak perlu melakukan penulisan kode untuk popover secara berulang di setiap tempat yang membutuhkannya.

Terima kasih sudah membaca,
Happy Coding ^^