Copy text hover button tooltip

Select text hover copy clipboard tooltip jquery

by Reinventatuweb

HTML

<table>
<thead>
  <tr>
    <td></td>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="to-copy">TEXT1 TEXT2 TEXT3</td>
  </tr>
  <tr>
    <td class="to-copy tc-mail">TEXT1 TEXT2 TEXT3 [email protected]</td>
  </tr>
  <tr>
    <td class="to-copy tc-domain">TEXT1 TEXT2 TEXT3 domain.com</td>
  </tr>
  </tbody>
</table>

<p class="to-copy">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>

CSS

body{
  padding-top: 40px;
}

.btn-copy-hover{
  background: #222;
  padding:5px;
  color: #fff;
  display: none;
  position: absolute;
  cursor: pointer;
}
.btn-copy-hover:hover{
  display: block !important;
  opacity: 1 !important;
}
#clipboard{
  opacity: 0;
}
.clicked{
	background: #0dd237;
}

JavaScript

//formato dominios
$('.to-copy.tc-domain').each(function() {
	$(this).html($(this).text().replace(/\b(\w+\.+\w+)\b/g, "<span>$1</span>"));
});

//formato mails
$('.to-copy.tc-mail').each(function() {
	$(this).html($(this).text().replace(/\b(([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+)\b/g, "<span>$1</span>"));
});


$('.to-copy').not('.tc-mail').not('.tc-domain').each(function() {
	$(this).html($(this).text().replace(/\b(\w+)\b/g, "<span>$1</span>"));
});

var temp = $("<input id='clipboard' style='opacity: 0; position: absolute;'>");
if($("#clipboard").length==0){
	$("body").append(temp);
}
  
var btn_copy_hover = $("<div class='btn-copy-hover'>Copy</div>");
if($(".btn-copy-hover").length==0){
	$("body").append(btn_copy_hover);
}	

$('.to-copy span').on({
    mouseenter: function () {
        $('#clipboard').val($(this).css('background-color','#ffff66').text());
    
	    clipboard = $(this).text();
	    
	    
	    var pos_x = $(this).offset().left + $(this).width()/2;
	    var pos_y = $(this).offset().top - 30;
	    
	    $(".btn-copy-hover").css({left: pos_x, top: pos_y});
	    $(".btn-copy-hover").removeClass("clicked");
	    $(".btn-copy-hover").show();
    },
    mouseleave: function () {
       $(this).css('background-color',''); 
      setTimeout(function() {
    		$(".btn-copy-hover").hide();
    	}, 300);
    }    
});

$("body").on("click",".btn-copy-hover", function(){
		var clipboard = document.getElementById('clipboard');
		clipboard.select();
		document.execCommand('copy');
		$(this).addClass("clicked");
});