css timeout

proof of concept for css timeout and a tooltip

HTML

<span id="copy-tooltip">↓</span><div id="copy-icon">whoa</div>

CSS

#copy-tooltip {
    position: relative;
}

#copy-icon {
    height: 55px;
    visibility: hidden;
    transition:0s 3s;
    width: 480px;
    background-color: red;
    color: #fff;
    text-align: left;
    position: fixed;
    top: 60px;
    left: 75%;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.5);
    font-size: 16px;
    text-transform: initial;
}


#copy-tooltip:active + #copy-icon, #copy-icon:active {
    visibility: visible;
    opacity: 1;
    transition:2s;
}

JavaScript

function fa(){
	console.log('fa');
}