Display additional text on mouseover hyperlink

I’m building a small site that displays my companys benefits. The site is a single page with 5-10 benefits positioned on the page with CSS. I’d like to have an area along the side that displays more text info on any benefit on a mouseover of the benefit.

I hope this makes sense, sorry I can’t post an image, still in the process of organising a host.

Any tips wpuld be appreciated,
D

Hi there Belfast75,

and welcome to these forums. :slight_smile:

You may find a CSS ‘tooltip’ of interest…

[color=navy]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css tooltip</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Content-Style-Type" content="text/css"/>

<style type="text/css">
/*<![CDATA[*/
body {
     font-family:verdana,arial,helvetica,sans-serif;
     font-size:16px;
 }
.container {
     height:30px;
     width:400px;
     margin: 20px auto;
}
a.info {
     position:relative; /*this is the key*/
     z-index:0;
     color:#666;
     font-style:oblique;
     text-decoration:none;
     display:block;
     float:left;
 }
.spanny {
     float:left;
 }
a.info .ttip {
     display: none;
     float:left;
 }
a.info:hover{
     z-index:1;
     background-color:#fff;
 }
a.info:hover .ttip {
     display:block;
     position:absolute;
     top:20px;
     left:40px;
     width:120px;
     border:3px double #0cf;
     background-color:#cff;
     color:#099;
     font-size:10px;
     font-style:normal;
     padding:5px;
 }
/*//]]>*/
</style>

</head>
<body>

<div class="container">
<span class="spanny">This&nbsp;</span>
<a href="#" class="info">word
<span class="ttip">
This is the customised tool-tip.  It's main advantage over the 'title' attribute
is that it remains in view whilst the hover state is maintained, thereby
allowing for a large amount of information to be imparted to the reader
</span>
</a>
<span class="spanny">&nbsp;will produce the tool-tip.</span>
</div>

</body>
</html>[/color]

coothead

Many thanks, cool tip that I’ll definately use in other sites.

Unfortuately the extra text I want to display may contain links so I was intending to display it on a mouseover but leave it on the screen on mouseout.

've managed to sort this out but don’t know how to close the thread.