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.

Div Select All Text

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>

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments