Tingkat Kesulitan : Intermediate
Bahasa Pemrograman : CSS
Penjelasan : Kalau anda perhatikan, bagian pre di blog ini jika di hover akan memunculkan sebuah tooltip yang bertuliskan "Double Click to Select All" sebagai pemberitahuan jika pengunjung menekan dua kali pada bagian pre dengan cepat, maka seluruh code yang ada di dalam elemen tersebut akan langsung terseleksi semua.
Pesan seperti ini akan berguna bagi pengunjung blog anda yang masih awam dengan keberadaan fitur double click select all ini.
Script
Simpan code CSS ini di halaman Edit HTML blog anda.
CSS
<style type="text/css">
pre code[data-tooltip]:before{content:attr(data-tooltip);position:absolute;opacity:0;transition:all .15s ease;padding:5px 10px;color:#181818;background:pink;top:0;right:0;}
pre code[data-tooltip]:hover:before{opacity:1;}
pre code[data-tooltip]:not([data-tooltip-persistent]):before{pointer-events:none}
@media(max-width:567px){
pre code[data-tooltip]:before{display:none;}
}
</style>Jika sudah, simpan.
Cara penggunaannya mudah, anda cukup menambahkan atribut data-tooltip pada setiap elemen code di semua postingan / artikel anda.
Contoh nya seperti ini :
<pre><code data-tooltip="Double Click to Select All">
<!DOCTYPE html>
<html>
<head>
<title>Contoh Title</title>
</head>
<body>
<p>Contoh PRE CODE</p>
</body>
</html>
</code></pre>Jika anda punya postingan tentang codingan yang jumlahnya masih sedikit, tentunya bukan masalah besar menambahkan atribut data-tooltip pada setiap elemen code.
Tapi, kalau artikel anda sudah banyak (ribuan mungkin), bakal bikin tangan pegel juga.
Solusinya, pasang script Javascript dibawah ini :
<script type="text/javascript">
var preElements = document.getElementsByTagName('code');
for(var i = 0; i < preElements.length; ++ i){
var element = preElements[i];
element.setAttribute("data-tooltip", "Double Click to Select All");
}
</script>Jika script diatas bekerja, semua elemen code di blog anda akan berisi atribut data-tooltip secara otomatis.
