Tooltip - Memunculkan PopUp pada teks saat diklik

Cara memunculkan PopUp pada saat teks diklik atau disorot kursor  -  yang saya tahu metode seperti itu biasa disebut dengan "Tooltip" koreksi saya jika salah. Karena selama penelusuran saya menemukan banyak sekali artikel yang membahas tentang cara memunculkan PopUp, dan itu membuat saya bingung karena metode yang di berikan berbeda-beda kebanyakan tidak sesuai dengan apa yang saya harapkan.

Hingga akhirnya saya menemukan artikel yang membahas hal serupa namun dengan penamaan yang berbeda, sedikit ada pencerahan karena artikel tersebut sama dengan apa yang saya maksud namun agak rumit tapi disini saya mendapatkan satu kunci untuk pencarian berikutnya yaitu "Cara membuat tooltip" dan ternyata benar saja pencarian saya yang selama ini membuat saya bingung disebut tooltip, Contohnya sebagai berikut :

Coba klik atau arahkan kursor pada tulisan iniDan inilah hasilnya

Jika benar ini artikel yang kamu cari, mari kita lanjutkan ke tutorialnya.

Pertama silahkan buat struktur HTML nya seperti berikut:

<div class="text">
1. Teks Utama
<span class="tooltip">
2. Teks kedua </span></div>

Pada skrip diatas saya menggunakan div karena lebih simpel dalam penulisan, meskipun skrip aslinya yang saya temukan sebenarnya menggunakan tag link. dan itu membuat saya kurang nyaman karena banyak kendala setelahnya, maka dari itu saya ubah jadi seperti skrip di atas.

Ok lanjut ,, teks 1 adalah tulisan yang akan tampil atau sebagai target dan teks 2 adalah tulisan yang akan muncul ketika kita klik atau mengarahkan kursor pada teks pertama. Tapi tidak cukup sampai disitu karena untuk membuat semua itu bekerja kita membutuhkan CSS dan kamu bisa membuatnya seperti berikut:

<style>
.tooltip{
    background:#303030; /*warna background*/
    padding:10px;
    color:#f0f0f0; /*warna teks*/
    border-radius:10px;
    -moz-border-radius:10px;
    width:200px; /*lebar box*/
    text-align:center;
    position:absolute;
}
.tooltip:before{
    content:"";
    position:absolute;
    border:10px solid transparent;
    border-bottom:10px solid #303030;
    top:-20px;
    left:10px;
}
.tooltip{display:none;}
div.text:hover .tooltip{display:block;}
</style>

Skrip CSS di atas berfungsi untuk membentuk box gelembung yang nantinya akan muncul jika diklik, selain itu skrip CSS tersebut juga bertugas menyembunyikan Tooltip sebelum objek disentuh atau disorot oleh kursor.

Untuk ukuran, warna background dan warna teks silahkan kamu sesuaikan dengan selera masing masing, sesuaikan juga posisinya jika dirasa kurang tepat.

Kamu bisa menyimpan skrip CSS tersebut bersamaan dengan skrip HTML nya pada postingan yang akan kamu buat atau bisa juga menyimpannya secara terpisah di widget blog kamu untuk caranya silahkan kamu pilih opsi Tata letak pada dashboard blogger kamu kemudian pilih tambahkan gadget, kemudian pilih HTML/JavaScript selanjutnya tempel skrip CSS tersebut pada kolom yang di sediakan kemudian simpan.

Selanjutnya kamu tinggal menambahkan skrip HTML nya saja pada postingan yang akan kamu buat.

Demikian artikel saya kali ini semoga postingan ini bermanfaat. Terimakasih.