Div Select All Text OnClick With Tooltip

Some time ago I was sharing with jquery text selection for pre tag, blockquote, and div. Well now I will share with onclik text selection and coupled with a tooltip to tell the command to be done.

See more: Multiple Tags To Select All Text Jquery
It can make as an alternative to automatic selection of the text without using jquery. And in fact this could be for anything like div, pre tags, or blockquote, but this time I just pointed to the div alone. So with this will allow visitors to block the necessary text in a div as in pictures animated gif below.

DEMO

CSS Code

.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;
}

HTML Code

Use the HTML code below when it will make the div that contains the text to be selected

<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>

Author: Adhy Suriady