Creat Custom Alert In JavaScript

Hey am new Web developer and am working on a quote website. To understand clearly this question just visit my CodePen project below and just once click any copy button in the proje

Solution 1:

You are showing a tooltip (or "alert" as you call it) by removing (or actually toggling) its hidden class. You can hide it again by adding the hidden class back. You can do that after some time, e.g. 3 seconds, by using setTimeout().

notify.classList.toggle('hidden');

// New code below:

setTimeout(() => {
  notify.classList.add('hidden');
}, 3000);

Solution 2:

You can add an onclick function to copy button to trigger timeout of the span. Just add this to end of your javascript file:

function hideSpan() {
    setTimeout(function(){ $(".status-copy-alert").addClass("hidden");
     //document.getElementById("status-copy-alert").classList.add("hidden"); use this code for javascript only 
    }, 3000);
    //you can change 3000 milliseconds to anything that you wish
}

And configure your button to:

<button class="copystatus btn" onclick="hideSpan();">Copy</button
<span class="status-copy-alert hidden" id="status-copy-alert">

If you're using Javascript only, don't forget to add an id to your alert span.

It's basically like, when user clicks on copystatus button, it triggers hideSpan() function. You can learn more about setTimout from this link