CSS Tooltip hover problem

Get Started
1

Hey guys,

I’m trying to make a tooltip thing so that when a user puts their mouse over a box on the site another much larger box pops up ontop of everything else on the site, and when they move away, it vanishes. I have all the code, and it works… except only sometimes. Sometimes when I load the page it just won’t work. I’ll reload it a few times and then it will work. But the times that it doesn’t are very frustrating. I don’t know why it works sometimes and doesn’t other times.

The page that this is in is very long and has tons of PHP in it to handle a login system and many other things. I don’t know if it’s the problem or not, but I don’t see anyway that it could be.

Here my code:

<div class="directions">
	<a class="tooltip" href="#">
		<div class="directionsAlertBox">
			Hover<br />
			here<br />
			for<br />
			directions
		</div>
		<span>
			<div class="alertBox">
				<strong>Directions</strong>
				<ul>
					<li>Each event has the option of entering hours for each of your four years in high school. No information from middle or elementary school is allowed.</li>
					<li>A year of high school <strong>includes</strong> the <strong>summer before</strong> the september of that year as well as the <strong>fall</strong> and <strong>spring</strong> of that year.</li>
					<li>Only <strong>numbers</strong> will count towards your total. Any box containing anything other than the number 0-9 will be ignored and outlined in red. Decimals will be <strong>rounded</strong>.</li><br />
					
					<li>To <strong>add</strong> an event: scroll to the bottom of the page and choose your event or add your own.</li>
					<li>To <strong>update</strong> an event: edit the hours for the event, and click <i>Update</i>.</li>
					<li>To <strong>delete</strong> an event: click <i>Remove</i>.</li> <br /> 
					
					<li>None of these actions are undoable. Anything you do will be final.</li>
				</ul>
			</div>
		</span>
	</a>
</div>


.directions {
	float: left;
	width: 28%;
}

.alertBox {
	padding: 10px;
	border: 1px solid #94a3c4;
	background: #eceff5;
}

.directionsAlertBox
{
	width: 65px;
	float: right;
	padding: 10px;
	border: 1px solid #94a3c4;
	background: #eceff5;
	text-align: right;
}

a:hover 
{
	background: transparent;
	text-decoration: none;
} 

a.tooltip span 
{
	display: none;
	padding: 2px 3px;
	margin-left: 8px;
	width: 28%;
}

a.tooltip:hover span
{
	display: block;
	position: absolute;
	right: 15%;
	background: #eceff5;
	border: 1px solid #cccccc;
	color: #6c6c6c;
	font-weight: normal;
}

Any help would be appreciated.