10
Jan
2013

jQuery Hover Box

posted Thursday, January 10th 2013 at 8:21 AM by

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, keep in mind the CSS and JavaScript will need to be adjusted for any specific needs or positioning your page might have.

The Javascript



The CSS

.popbox {
	display: none;
	position: absolute;
	z-index: 99999;
	width: 600px;
	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 div.title {
	background-color: #4D4F53;
	color: 	#E3E5DD;
	font-size: 14px;
	display: block;
	padding: 5px 10px;
}
.popbox p {
	padding: 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.

Share This:

Tags:

Comments:

View (0) Comments Post a Comment
  • Replying to Adam Konieska on jQuery Hover Box