Con un poco de código podemos hacer el típico botón que nos permite pasar al porta-papeles o lo que es lo mismo, copiar un texto; este texto puede estar oculto o visible y podrá ser código o texto plano.
1 Añadir un elemento Code Block.
2 En el bloque JavaScript pegar este código.
jQuery(document).ready(function($) {
var tooltip = document.getElementById("elTooltip");
tooltip.innerHTML = "Copiar";
$('#boton').on('mouseout', function(e) {
tooltip.innerHTML = "Copiar";
});
$('#boton').on('click', function(e) {
e.preventDefault();
/*** Tomar el valor del texto ****/
var elTexto = document.getElementById('aCopiar').innerHTML;
/* Texto al porta-papeles */
navigator.clipboard.writeText(elTexto);
tooltip.innerHTML = "Copiado" ;
});
});
2 En el bloque CSS pegar este código.
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
align-items:center;
visibility: hidden;
width: 75px;
height:35px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 7px 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
font-size: 14px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
3 Añadir un elemento DIV y ponerle la clase "tooltip".
4 Dentro del elemento DIV anterior añadir un segundo elemento DIV al que le daremos la ID "elTooltip" y la clase "tooltiptext".
5 Añadir un botón al que se pondrá "boton" de ID y que también estará dentro del primer elemento DIV.
6 Al elemento de texto que vayamos a utilizar para que sea copiado le daremos la ID "aCopiar" y el texto que contenga será el que se quedará copiado en el portapapeles.
