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.


This is the CSS:


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;


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

<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>';