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.

   Related Sponsored Links

Disclaimer: The information contained in this website is for general information purposes only and in no event will this site or its owners be liable for any losses or damages associated with your use of our site or content. Click here to see our full Disclaimer.

Comments

  1. Just to say this tutorial has really helped me today. There are various ways I have been told to do the pop up but this one worked for me when the others didn’t! Many thanks. 🙂 http://www.lyndsaymoon.com

  2. MandySlatenRoberson says:

    I am trying to duplicate this with a search box pop-up. I have the following code in a text widget:
    <div onclick=”document.getElementById(‘pop-up-box’).style.display = ‘block’;” onclick=”document.getElementById(‘pop-up-box’).style.display = ‘none’;”>
    <div id=”pop-up-trigger”><img src=”/wp-content/uploads/2013/10/search.png” /></div>
    <div id=”pop-up-box”>
    <form role=”search” action=”http://brnonline.mandyroberson.com/” class=”search-form” method=”get”><input type=”search” placeholder=”Search…” name=”s”><input type=”submit” value=”Search”></form>
    </div>
    </div>
    However, the search box does not close on click. Please advise. Thank you.

  3. MandySlatenRoberson says:

    lyndsaymoon I see you use this code for the subscribe box in a footer widget. Could you tell me what you used to set it to close on click, even without entry in the box? Thanks!

Leave a Comment

*