How to make hidden content pop up only when an object is hovered over with mouse

There may come a time when you need to create content that you want to have stay hidden until an object or image is hovered over with the mouse. An example of a way to use this is in making a map with map pins that when the mouse hovers over a map pin, it creates a pop up with information about that location or a project that was completed for that location. Just follow these steps to make hidden content pop up when an object or image is hovered over with the mouse on your WordPress site.

I will be using HTML, Javascript, and CSS to do this. First, you will need to set up the code on the WordPress page or post that you want the content to pop up on. Below is an example of how to set this up:

<div onmouseover="document.getElementById('pop-up-box').style.display = 'block';" onmouseout="document.getElementById('pop-up-box').style.display = 'none';">
<div id="pop-up-trigger"><img src="image-path-goes-here" /></div>
<div id="pop-up-box">
This is what will appear in the pop up box.  Put your content here that you want to appear when the pop-up-trigger div object or image is hovered over with the mouse.  
</div>
</div>

In the code above, pop-up-box is the id given to the div that will contain your pop up content. Then pop-up-trigger is the id given to the div that contains the image or object that will make the pop-up-box div appear when it is hovered over with the mouse. You can of course name these divs whatever you want. If using an image like I did in the example above, your image’s path goes where I put image-path-goes here. Now, below is the CSS for these divs:

#pop-up-box {
     position: absolute;
     z-index: 9999;
     display: none;
}

You can also use CSS positioning to position the trigger and/or the pop up itself. You can add other styles to the pop up box such as different background colors, borders, etc. to make it stand out better. Hope this helps, enjoy.