Need my tooltip to appear outside of the div it's assigned to

HTML & CSS
1

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

For css it has to be in the div.

3

Alright, well it’s good to get some response on this. I was hoping for purely CSS, but it looks like I’ll have to go with AJAX or Javascript or something. Poop.

Thanks so much for the response!

4

As long as its in the same parent you can target it. If you can you can just wrap another div around it. It’s apsoluted so you can place it anywhere

5

Welcome to SitePoint, becca…

it really depends, actually. ( but it hard to tell from the tiny code snippet provided)
if you don’t put position relative on span.link, and put position relative on a wrapper of the span the tool tip will appear ‘outside’ the container element. Of course the problem there will be that you wont be able to place the tool tip logically using top:, bottom:, left:, right: ( if you do then it will be position relative to the element you have given RP to and not the span.link. so it’s a trade off.

The purple block is the popup that I want to go anyyyywhere else, outside of my calendar.
if this is true then try what I suggested … span.link,
give RP to the element that wraps your calendar… and you will notice the effect. Keep in mind this may just prove to be confusing to user , even if it succeeds.

OH and one IMPORTANT note, this WILL NOT WORK if you are using TABLEs or dispplay:table-****; as neither accepts RP/AP

6

Thank you, dresden_phoenix. I’d posted to a couple other forums and hadn’t gotten any ACTUAL assistance. I really appreciate your in-depth response and I’ll give your suggestions a shot. Thanks so much!