Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a pop-up div on mouse over and stay when click using jQuery
Overview
The pop-up div can be created with the help of HTML, CSS and the functioning of which can be done with the help of ‘Javascript’ library ‘jQuery’. To make the mouseover and stay functionality to the div jQuery has a built in pre defined function.
The two functions which are mainly used in this task are −
mouseover − This function triggers when the mouse is over the selected element.
mouseout − This function triggers when the mouse leaves the are of the selected element for mouse over.
Algorithm
Step 1 − Create a HTML boilerplate in the text editor.
Step 2 − Add the jQuery CDN link to the head tag of the HTML code. On adding the CDN link it gives the functionality to the HTML code to use jQuery methods.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
Step 3 − Now create a HTML button using the HTML <button> tag.
<button>Pop-Up</button>
Step 4 − Create a div container which contains the popup of the page.
<div class="container"style="display: none;width: 6rem;padding: 0.5rem; margin: 0.5rem 0.8rem; box-shadow: 0 0 5px rgb(160, 158, 158);background-color: green;color: white;text-align: center;border-radius: 5px;"> Tutorialspoint </div>Step 5 − Now create the jQuery function inside the script tag.
<script>
$('button').mouseover(() => {
$('.container').css("display", "block")
})
$('button').mouseout(() => {
$('.container').css("display", "none")
})
</script>
Step 6 − The popup functionality is ready to use on browsers.
Example
In the given example we have created a HTML button and we have created the popup div container which is displayed on screen when the mouse is hovering over the button. We had also styled the popup using the inline css. The jQuery function is created in which using the jQuery selector syntax the button element is selected with the mouseover event attached to it. In the mouseover event it is passed with the callback function that is triggered on entering the mouse over div.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ==" crossorigin="anonymous" referrerpolicy="no-referrer"> </script>
<title>JQuery Pop Over</title>
</head>
<body>
<button>Pop-Up</button>
<div class="container" style="display: none;width: 6rem;padding: 0.5rem; margin: 0.5rem 0.8rem; box-shadow: 0 0 5px rgb(160, 158, 158);background-color: green;color: white;text-align: center;border-radius: 5px;">
Tutorialspoint
</div>
<script>
$('button').mouseover(() => {
$('.container').css("display", "block")
})
$('button').mouseout(() => {
$('.container').css("display", "none")
})
</script>
</body>
</html>
In the given below images it shows the output of the above example. In the first image it shows the static simple output. Which contains only a single button on the page.
In the below second image it shows the popup div container. So when the user hover over the button the mouseover event is triggered and it performs the display block action to the div container which shows the popup div. As soon as the mouse is over the button the div container containing the popup displays on the screen. When the mouse leaves the button the popup disappears from the browser's screen.
Conclusion
These types of popover are used in the web application such as a mcq web app, in this we can make a button to function popover which will pop out the hint to the answer of the question. In this we had only used the two mouse events but there are more mouse events such as: mouse down, enter, leave these all have their own functionality. The popup is like a dialogue box which tells us certain information about any topic or it can be a confirmation box also to confirm the choice of the end user in terms of yes or no. In the mouseover and mouseout event a callback must be passed so that a particular action triggers. Do not forget to add the CDN link to the head tag otherwise the jQuery function will not execute and the page will remain static with some errors in the console.
3K+ Views
