Div Select All Text OnClick With Tooltip

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. 


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>

Reactions:
Share this with short URL:

You Might Also Like:

Use parse tool to easy get the text style on disqus comments:
Show Parser Hide Parser