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> <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>



© 2025 Manajmnt code

Share to :

☷✎

Related

• How-to make background blur using CSS backdrop-filter PropertyIn this example we're using (CSS backdrop-filter Property) to make the background of body blur <… Read More
• Simple html responsive layout without using any library or frameworkThis is a simple, responsive, HTML template with different devices, designed with HTML and CSS only… Read More
• Responsive Multi-level dropdown menu with search barIn this code, I'm going to share with you a responsive multi-level dropdown with search bar, so we n… Read More