How to create a popup using CSS and JavaScript on hover

What is Hover, Mouseover?

A hover is also known as a popup, we can create a popup using CSS and JavaScript. A hover or mouseover refers to displaying the contents of a particular element when the user moves his mouse pointer over that particular element. When our cursor moves over an element and a graphic element activates from that element, it is called a mouse hover. In today’s article, we will see how to create a popup using CSS and JavaScript.

What is the benefit of using popups on a website?

Popups are very important on any website. Because it helps us to show additional content of our site without any extra space. They are very fast and user-friendly. In many ways, it acts like a tooltip for users. This makes the site look very attractive.

How are popups made?

Popups are very easy to make. They can be made in 2 ways

  1. With the help of HTML and CSS.
  2. Popup using CSS and JavaScript

If you want to create popups using HTML or CSS you can read our previous article by clicking here

If you want to create popup using CSS and JavaScript continue reading this article.

How to create a popups

This is how we can create our create popups using CSS and JavaScript follow the code for best result.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}


.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: popup 1s;
}

@-webkit-keyframes popup {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes popup {
  from {opacity: 0;}
  to {opacity:1 ;}
}
</style>
</head>
<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" >Hover on me for the popup!
  <span class="popuptext" id="myPopup">Your popup text goes here !</span>
</div>

<script>

    var popupArea =  document.querySelector('.popup')
    popupArea.addEventListener('mouseover', function() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
})
</script>

</body>
</html>
Popup | hover | hover js | how to create  popup using CSS and JavaScript
This is how our pop up look like

Through this code, we want to tell you how you can create a very simple hover. We have kept this code very simple for you to understand. In this code, we have taken a div on which you have to hover. You can design this div according to yourself, we have kept this div very simple so that you do not have any kind of confusion.

Now you have to decide what you want to keep the position of the popup, you can set the position of your popup area according to your position. And will make his visibility hidden. If you want to keep your popup very simple then you can remove its animation. We have given this animation so that our popup can get a smooth effect.

Now you have to create a script for the popup using CSS and JavaScript. In this script, you only have to change its class. If you have a good understanding of JavaScript, then you can also insert your scripts inside it. We have only changed the class so that there is not much confusion in our code. In this script, you can use CSS.

We have added this script to our div element with the help of addEventListener(). This script can also be used in different ways. You can use this script from an HTML event. For this, you only have to name the function which we have not given. If you want to do this script by giving it the name of a function, then it is also a very easy task. All you need to do is a small change to function () here. You have to write the function functionName () at this place.

To write this functionName in HTML, you just have to type onmouseover = “functionName ()”. Your hover is ready. Or you can also use it in our way. So what is the delay now, you should use a popup in your design. You can also design in different ways. And if you are having any kind of problem in creating a popup using CSS and JavaScript, then please write your code in the comment section, we will try to help you. Also, tell us which topic you want in the next article.

Leave a Comment