Tooltip for permalink fades in and out #4

css/main.css

@@ -177,15 +177,18 @@ input{font-family: 'Georgia', Serif;}
 	position: relative;
 }
 
-.getPlink::before, .getPlink::after {
+.getPlink::before, .getPlink::after{
 	position: absolute;
 	opacity: 0;
+	transition: opacity 1s ease-in-out;
+}
+
+.getPlink.inactive::before, .getPlink.inactive::after {
 	visibility: hidden;
 }
 
-.getPlink:focus::before, .getPlink:focus::after {
+.getPlink.active::before, .getPlink.active::after {
 	opacity: 1;
-	visibility: visible;
 }
 
 .getPlink::before {

index.html

@@ -42,7 +42,7 @@
 
 		<div id="plink-form">
 			<input id="plink" type="text" value=""></input>
-			<button class="getPlink" type="button" onclick= genPermalink();>Get Permalink</button>
+			<button class="getPlink inactive" type="button" onclick= genPermalink();>Get Permalink</button>
 		</div>
 	</div>
 

js/main.js

@@ -220,6 +220,18 @@ function genPermalink(){
 	plinkTextField.value = permalink;
 	plinkTextField.select();
 	document.execCommand('copy');
+
+	//Fades tooltip in and out
+	var plinkButton = document.querySelector('.getPlink')
+	plinkButton.classList.add('active')
+	plinkButton.classList.remove('inactive')
+
+	setTimeout(function(){
+		plinkButton.classList.remove('active')
+		setTimeout(function(){
+			plinkButton.classList.add('inactive')
+		}, 1000);
+	}, 1000);
 }
 
 $('#csvDownload').click(function () {