Div Select All Text OnClick With Tooltip 2

by kompiajaib

HTML

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

CSS

.box{
    position:relative;    
    padding:0;
    margin-top:80px;
}
.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;
}