mouseover popup script

I am looking for a mouseover popup script for text to appear when the cursor is over an icon.

I have found some, but they are not right. I want to make sure that when the text pops up, that it doesn't move with the cursor, and stays in a permanent position. Of course it also needs to disappear when the cursor moves off.

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

<meta charset="utf-8">

<title>CSS pop-up</title>

<style>
body {
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:100%;
    background-color:#fcfcfc;
  }
#container {
    width:960px;
    margin:auto;
  }
#hover-item {
    position:relative;
    cursor:pointer;
  }
#hover-item span {
    display:none;
    position:absolute;
    top:0;
    left:20px;
    z-index:1;
    width:200px;
    padding:10px;
    border:1px solid #630;
    border-radius:5px;
    background-color:#fdb;
    box-shadow:4px 4px 4px #999;
    font-size:75%;
    color:#630;
    cursor:default;
  }
#hover-item:hover span {
    display:block;
  }
</style>

</head>
<body>

<div id="container">

Hover over this...

<span id="hover-item">

<img src="http://www.webmasterworld.com/theme/default/gfx/wilk.gif" alt="">

<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
faucibus felis.
</span>

</span>

...to see some hidden text displayed.

</div>

</body>
</html>

mouseover popup script

whatson

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week