How to Open a Popup on Hover using JavaScript ?

Last Updated : 08 Apr, 2024

We will be learning about the ways to open a pop-up when the cursor hovers over the HTML Element. Hover is a useful UI interaction that helps in getting more information about a specific HTML element.

Pop Up can be shown as the additional data to make things much more understandable. It responds to and gets triggered by the common user interface interactions. In JavaScript, pop-ups can be made visible by using event listeners.

These are the following approaches:

Table of Content

Using display property
Using ClassList property
Using Visibility property

Using display property

This approach will use event listeners and display property in javascript.
mouseenter or mouseover event listener will be used whenever cursor hovers over the HTML Element
mouseleave or mouseout will be used whenever cursor leaves the HTML Element
use document.getElementById() method to target specific HTML Element.
display property will be used to show or hide the pop up

Example: This example shows the use of display property for showing the popup on hover.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Hover Popup Using Javascript
        Event Listener</title>
    <style>
        #elementToHover {
            display: inline-block;
            position: relative;
        }

        #elementToPopup {
            display: none;
            position: absolute;
            top: 30px;
            left: 7px;
            background-color: #555;
            color: #fff;
            padding: 8px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div id="elementToHover">Hover Over Content
        - Javascript Approach</div>
    <div id="elementToPopup">Popped Up Content
        - Javascript Approach</div>
    <script>
        const elementToHover = document.
            getElementById('elementToHover');
        const elementToPopup = document.
            getElementById('elementToPopup');

        elementToHover.addEventListener('mouseenter',
            () => {
                elementToPopup.style.display = 'block';
            });

        elementToHover.addEventListener('mouseleave',
            () => {
                elementToPopup.style.display = 'none';
            });
    </script>
</body>

</html>

Output:

OUTPUT GIF OF JAVASCRIPT DISPLAY PROPERTY

Using ClassList Property

Similar to display property, classlist approach will also use same event listeners. In this approach add() and remove() methods will be used to dynamically add classes to HTML element to show or hide the pop up.

Example: This example shows the use of add() and remove() method for showing popup on hover.

Javascript

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
    initial-scale=1.0">
    <title>Hover Popup Using Javascript
    Event Listener</title>
    <style>
        #elementToHover {
            display: inline-block;
            position: relative;
        }

        #elementToPopup {
            display: none;
            position: absolute;
            top: 30px;
            left: 7px;
            background-color: #555;
            color: #fff;
            padding: 8px;
            border-radius: 5px;
        }

        #elementToPopup.show {
            display: block;
        }
    </style>
</head>

<body>
    <div id="elementToHover">Hover Over Content 
    - Javascript ClassList Approach</div>
    <div id="elementToPopup">Popped Up Content
    - Javascript ClassList Approach</div>
</body>
<script>
    const elementToHover = document.
    getElementById('elementToHover');
    const elementToPopup = document.
    getElementById('elementToPopup');

    elementToHover.addEventListener('mouseover',
    () => {
        elementToPopup.classList.add('show');
    });

    elementToHover.addEventListener('mouseout',
    () => {
        elementToPopup.classList.remove('show');
    });
</script>

</html>

Output:

OUTPUT GIF OF JAVASCRIPT CLASSLIST METHOD

Using Visibility property

This approach uses the mouseover and mouseout events to control the visibility of a popup element when hovering over a button. Initially, the popup is hidden (visibility: hidden in CSS). When the mouse hovers over the button, the mouseover event is triggered, and the popup’s visibility is set to visible using the style.visibility property in JavaScript. Similarly, when the mouse moves out of the button (mouseout event), the popup’s visibility is set back to hidden, hiding the popup again.

Example: This example uses visibility property to open a Popup on Hover using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Popup on Hover</title>
<style>
.container {
  position: relative;
  /* display: inline-block; */
  text-align: center;
}

.popup {
  visibility: hidden;
  position: absolute;
  top: 50px;
  left: 50%;
  height: 50px;
  width: 200px;
  transform: translate(-50%, 0);
  background-color: rgb(228, 228, 175);
  color: green;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  z-index: 1;
}

.popup.show {
  visibility: visible;
}
</style>
</head>
<body>
<div class="container">
  <div id="hoverButton">Hover Over Content
    - Javascript Visibility property</div>
  <div id="popup" class="popup">
    Welcome to GeeksForGeeks!
  </div>
</div>
<script>
const hoverButton = document.getElementById('hoverButton');
const popup = document.getElementById('popup');

hoverButton.addEventListener('mouseover', () => {
  popup.style.visibility = 'visible';
});

hoverButton.addEventListener('mouseout', () => {
  popup.style.visibility = 'hidden';
});
</script>
</body>
</html>