EcalCondDB/webapp/tooltip.html

0001 <!-- tooltip.html -->
0002
0003 <!-- A simple test page for CSS tooltips -->
0004 <!-- $Id$ -->
0005
0006 <html>
0007 <head>
0008 <style>
0009
0010
0011 /* allows tooltips in <div> */
0012 div.ttp {
0013   position:  relative;
0014   z-index:  24;
0015 }
0016
0017 div.ttp:hover {
0018   z-index:  25;
0019 }
0020
0021 div.ttp div.tt {
0022   position: absolute;
0023   top: 1em;
0024   left: -3000px;
0025   z-index:  25;
0026 }
0027
0028 div.ttp:hover div.tt {
0029   left:  0px;
0030 }
0031
0032 .r { background:  red; }
0033 .g { background:  green; }
0034 .b { background:  blue; }
0035
0036 .bl {
0037   display:  block;
0038   float:  left;
0039 }
0040
0041 .big {
0042   border: thin solid black;
0043   width:  200px;
0044   height: 200px;
0045 }
0046
0047 </style>
0048 </head>
0049
0050 <body>
0051
0052 <div class='ttp r bl'>TTP<div class='tt r'>Tooltip</div></div>
0053 <div class='ttp g bl'>TTP<div class='tt g big'>Tooltip</div></div>
0054 <div class='ttp b bl'>TTP<div class='tt b'>Tooltip</div></div>
0055 <br/>
0056 <div class='ttp r bl'>TTP<div class='tt r'>Tooltip</div></div>
0057 <div class='ttp g bl'>TTP<div class='tt g big'>Tooltip</div></div>
0058 <div class='ttp b bl'>TTP<div class='tt b'>Tooltip</div></div>
0059 <br/><br/><br/>
0060 <a href='#'><div class='ttp'>Link Text<div class='tt r'>Tooltip</div></div></a>
0061
0062 </body>
0063 </html>