.copy-wrapper {
position: relative;
display: inline;
cursor: pointer;
}

.copy-text {
/*color: #0645ad;
text-decoration: underline dotted;*/
}

.copy-text:hover {
color: #17a2b8;
}


.tooltip {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s;
white-space: nowrap;
pointer-events: none;
}


.tooltip::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border-width: 5px;
border-style: solid;
border-color: #333 transparent transparent transparent;
}


/* dica ao passar o mouse */
.copy-wrapper:hover .tooltip {
opacity: 1;
visibility: visible;
}


/* estado após copiar */
.copy-wrapper.copied .tooltip {
content: "Copiado!";
}