How to Add tooltip using JavaScript only

In this example, we'll learn how to create tooltip using javascript only, you don't need html tag or CSS style, the idea it's create a paragraph as tooltip and remove it after a few seconds by using setTimeout Method, you can add CSS transition-property with javascript to hide with beautiful style.

<button id="btn">click me</button> <script> document.getElementById("btn").addEventListener("click", function(){ setTimeout(function(){ var par=document.createElement("p"); par. id="tooltip"; par.innerHTML="message..."; par.style="width: max-content; padding: 5px 15px; background: #505050; color: white; border-radius: 3px; position: absolute; bottom: 10px; right: 10px;transition: 0.9s;opacity: 1"; document.body.appendChild(par) }, 10); setTimeout(function(){ var hidetooltip= document.getElementById("tooltip"); hidetooltip.style.transform = "translateY(-100px)"; hidetooltip.style.opacity = "0"; }, 1500); setTimeout(function(){ document.getElementById("tooltip").remove(); }, 1700); }) </script>

© Manajmnt code

Share to :

☷✎