Looking for help with pop-up hover windows

**Springbok** · 10-22-2011, 07:23 PM

I have a simple webpage with pictures of a group of friends. I want to have a pop-up window hover when someone places their mouse on the friends image. The pop-up window would contain text with their name and information about them. I've checked out various links on the Internet for the past 3 days, but can't find anything that I understand. The closest thing I came upon was a pop-up window that sat in the top left of my page and disappeared when I scrolled down the page. I just want the pop-up window to hover over the image, or on either side, depending on the image placement on the webpage. Thanks in advance for any help.

**djr33** · 10-22-2011, 09:28 PM

The technology behind this is similar to a rollover or mouseover image changing-- but instead of a new image, you want to display a hidden part of the page. Note that this is not a "window", but just a div or other part of the current page. (A window means a new browser window-- with a close button, etc.)

If you're looking for something that is already made for this, then look at various "tooltip" scripts, including some on this website.

But it also would be fairly easy to make this yourself:
1. Create a hidden div positioned where you'd like with whatever contents you'd like. Use CSS properties (display:none;) to hide it.
2. Add an onmouseover event on the image to show the div by id. (display:block;)
3. Add an onmouseout event on the image to hide the div by id. (display:none;)

**coothead** · 10-23-2011, 12:31 AM

Hi there Springbok,

and a warm welcome to these forums.

Here is a CSS example for you to try...

Code:


<!DOCTYPE html>
<html lang="en">
<head>

<base href="http://www.coothead.co.uk/images/">

<meta charset="utf-8">

<title>css "tooltip"</title>

<style>

body {
    background-color:#f0f0f0;
 }

#container {
    width:830px;
    padding:5px;
    margin:20px auto 0;
    border:3px double #666;
    box-shadow:#333 20px 20px 40px;
    background-color:#fff;
    overflow:hidden;
 }

.friends {
    position:relative;
    float:left;
    width:401px;
    height:246px;
    border:2px solid #333;
    margin:5px;
    cursor:pointer;
 }

.friends:nth-of-type(1) {background-image:url(blood.jpg);}
.friends:nth-of-type(2) {background-image:url(grap.jpg);}
.friends:nth-of-type(3) {background-image:url(clouds.jpg);}
.friends:nth-of-type(4) {background-image:url(autumn.jpg);}

.friends span {
    position:absolute;
    top:-7px;
    left:273px;
    z-index:1;
    display:none;
    width:123px;
    padding:5px;
    border:1px solid #630;
    background-color:#fdb;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:10px;
    color:#630;
    box-shadow:#000 1px 1px 2px;
 }

.friends:hover span {display:block;}

</style>

</head>
<body>

<div id="container">

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
fermentum sed eu arcu.
</span>
</div>

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
fermentum sed eu arcu.
</span>
</div>

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
fermentum sed eu arcu.
</span>
</div>

<div class="friends">
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque at metus 
ac sapien varius vulputate eget vel tellus. Fusce quis diam at mauris vulputate 
fermentum sed eu arcu.
</span>
</div>

</div>

</body>
</html>

coothead

Thread: Looking for help with pop-up hover windows

Thread Tools

Search Thread

Looking for help with pop-up hover windows

Bookmarks

Bookmarks

Posting Permissions