I currently have a CSS hover tooltip popping up over a link, how can I have it pop up in a different div instead (update a different div that the hover is not in)?

Below is an example of my issue. The beautifully crossed out lines are event names. The purple block is the popup that I want to go anyyyywhere else, outside of my calendar.

http://i49.tinypic.com/6qcjlu.png



This is the CSS:

[CODE]

span.link {
position: relative;
}

span.link a span {
display: none;
}

span.link a:hover {
font-size: 99%;
font-color: #000000;
}

span.link a:hover span {
display: block;
position: absolute;
margin-top: 10px;
margin-left: -5px;
width: 110px; padding: 5px;
z-index: 100;
color: #000000;
background: #D99FEC;
font: 12px "Arial", sans-serif;
text-align: left;
text-decoration: none;
}

[CODE]



This is how I currently have my link, inside my foreach:


[CODE]
<span class="link"><a href="javascript: void(0)"><font face=verdana,arial,helvetica size=2><br/><br/>?</font><span>Start Time: '.$event[event_time].'<br/> Course: '.$event[event_location].' </span></a></span>
<div class="event">
'."<a href='event_page.php?id=$event[event_number]'>$event[event_name]</a>".'</div>';

[CODE]