Ditulis oleh: Ditulis pada: 10/07/2014
Div Select All Text OnClick With Tooltip - Beberapa waktu yang lalu saya sharing seleksi teks dengan jquery untuk tag pre, blockquote, dan div. Nah kini saya akan share seleksi teks dengan onclik dan ditambah dengan tooltip untuk memberitahukan perintah yang harus dilakukan.
Baca juga: Multiple Tags Untuk Select All Text Jquery
Ini bisa Anda jadikan sebagai alternative untuk seleksi otomatis pada teks tanpa menggunakan jquery. Dan sebenarnya ini bisa untuk apa saja seperti div, tag pre, ataupun blockquote, namun kali ini saya hanya mencontohkan untuk div saja. Sehingga dengan ini akan memudahkan pengunjung untuk mem-block teks yang diperlukan di dalam sebuah div seperti pada gambar animasi gif di bawah ini.
Kode CSS
.box{
position:relative;
padding:0;
margin:20px auto;
}
.div1{
border:#ddd 1px solid;
border-left:3px solid #aaa;
background:#efefef;
padding:6px 10px;
margin: 0 auto;
display: block;
}
.div2{
position:absolute;
padding:3px 10px;
top:0;
right:0;
display: block;
opacity:0;
transition:all 400ms ease-in-out;
border-radius:4px;
background:#555;
color:#fff;
}
.div2:after{
content:"";
width:0;
height:0;
position:absolute;
bottom:-20px;
left:14px;
border:10px solid transparent;
border-color:#555 transparent transparent;
}
.div1:focus,.div1:active{
outline:none;
}
.box:hover .div2{
opacity:1;
top:-35px;
}
Kode HTML
Gunakan kode HTML di bawah ini ketika akan membuat div yang berisi teks untuk diseleksi.
<div class='box'>
<div class="div1" contenteditable="true" onClick="document.execCommand('selectAll',false,null)">
Contoh teks dalam div untuk diseleksi otomatis ketika di klik.
</div>
<div class="div2">Klik untuk seleksi teks!</div>
</div>