Blog

jQuery Hover Box

Adam Konieska  |  January 10, 2013

Background

Recently I needed to use a tool tip style hovering box that would display a lot of information. I found some great libraries online that would display a div tag when the user hovered over a specific element. That was pretty awesome, I thought. Until I tried it out and realized that if the element the user was hovering over was close to the edge of the screen, the hover box would either be cut off or not displayed at all! The user deserves better!

Example

This is a popbox test. Hover here to see how the popbox works. Additionally, you can also hover here to see a different example.

Implementation

There is some basic setup, including CSS to format the popup div and the jQuery to make it work. Then add a dash of HTML and viola! Popup boxes that won’t hide somewhere off screen. Here’s the nuts and bolts of it:

The Javascript

   

The CSS

.popbox {
	display: none;
	position: absolute;
	z-index: 99999;
	width: 400px;
	padding: 10px;
	background: #EEEFEB;
	color: #000000;
	border: 1px solid #4D4F53;
	margin: 0px;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
	box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
}
.popbox h2
{
	background-color: #4D4F53;
	color: 	#E3E5DD;
	font-size: 14px;
	display: block;
	width: 100%;
	margin: -10px 0px 8px -10px;
	padding: 5px 10px;
}

The HTML

Success!

This is an example popbox.

Danger!

Don't let this popbox go off the screen!
This is a popbox test. Hover here to see how it works. You can also hover here to see a different example.

Success!

This is an example popbox.

Danger!

Don’t let this popbox go off the screen!

Final Thoughts

That’s all there is to it, a simple jQuery popup box that doesn’t fly off the screen. Have a questions or comment about the code? Let me know in the comments below.

Posted in: Web, Web Development, Technical Strategy

Share