<!-- tooltip.html -->

<!-- A simple test page for CSS tooltips -->
<!-- $Id$ -->

<html>
<head>
<style>


/* allows tooltips in <div> */
div.ttp {
  position:  relative;
  z-index:  24;
}

div.ttp:hover {
  z-index:  25;
}

div.ttp div.tt {
  position: absolute;
  top: 1em;
  left: -3000px;
  z-index:  25;
}

div.ttp:hover div.tt {
  left:  0px;
}

.r { background:  red; }
.g { background:  green; }
.b { background:  blue; }

.bl {
  display:  block;
  float:  left;
}

.big {
  border: thin solid black;
  width:  200px;
  height: 200px;
}

</style>
</head>

<body>

<div class='ttp r bl'>TTP<div class='tt r'>Tooltip</div></div>
<div class='ttp g bl'>TTP<div class='tt g big'>Tooltip</div></div>
<div class='ttp b bl'>TTP<div class='tt b'>Tooltip</div></div>
<br/>
<div class='ttp r bl'>TTP<div class='tt r'>Tooltip</div></div>
<div class='ttp g bl'>TTP<div class='tt g big'>Tooltip</div></div>
<div class='ttp b bl'>TTP<div class='tt b'>Tooltip</div></div>
<br/><br/><br/>
<a href='#'><div class='ttp'>Link Text<div class='tt r'>Tooltip</div></div></a>

</body>
</html>
