Hola apañero
Haber si te sirve este script, lo he probado en Mozilla 1.7 y IE6 y parece que funciona, deberia de funcionar en IE5+ y NS6+, si encuentras algun error o ves alguna forma de mejorarlo, seguro que se puede mejorar, cuentamelo.
Código PHP:
<html><head>
<link rel="stylesheet" href="prueba_files/estiloprincipal.htm" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
<!--
function get_client_width() {
if (window.innerWidth != null)
return window.innerWidth;
if (document.body.clientWidth != null)
return document.body.clientWidth;
return (null);
}
function get_client_height() {
if (window.innerHeight != null)
return window.innerHeight;
if (document.body.clientHeight != null)
return document.body.clientHeight;
return (null);
}
function get_scroll_client_width(){
if(window.pageXOffset != null)
return window.pageXOffset;
if(document.body.scrollLeft != null)
return document.body.scrollLeft;
return (null)
}
function get_scroll_client_height(){
if(window.pageYOffset != null)
return window.pageYOffset;
if(document.body.scrollTop != null)
return document.body.scrollTop;
return (null)
}
function show_tooltip(evt,this_link,tip_text){
// Establece aqui el ancho maximo para el tooltip
var width_tooltip = 300
plus_xy = 10 // establece la distancia entre el tooltip y el enlace
var my_tooltip = document.getElementById("tooltip")
with(my_tooltip.style){
visibility = "hidden"
width= ""
left = "0px"
top = "0px"
}
my_tooltip.innerHTML = "<div class='titleTooltip'>" + this_link.innerHTML + " de Noviembre<\/div>" + tip_text +""
my_tooltip.style.width = my_tooltip.offsetWidth < parseInt(width_tooltip) ? my_tooltip.offsetWidth : width_tooltip
elemWidth = my_tooltip.offsetWidth
elemHeight = my_tooltip.offsetHeight
width_window = get_client_width()+ get_scroll_client_width()
height_window = get_client_height()+ get_scroll_client_height()
topVal = evt.pageY ? evt.pageY : evt.y + document.body.scrollTop
leftVal = evt.pageX ? evt.pageX : evt.x + document.body.scrollLeft
if(elemWidth < width_window - leftVal ) { leftVal += plus_xy}
else if(elemWidth < leftVal){leftVal -= elemWidth + plus_xy }
else{leftVal = leftVal - (elemWidth / 2)}
if(elemHeight + plus_xy < height_window - topVal ) { }
else if(get_scroll_client_height() < topVal - (elemHeight + plus_xy)){topVal -=(elemHeight + plus_xy )}
else{topVal = elemHeight+ plus_xy > get_client_height() ? get_scroll_client_height() + plus_xy : topVal - ((elemHeight + plus_xy )/ 2)}
my_tooltip.style.top = topVal;
my_tooltip.style.left = leftVal
my_tooltip.style.visibility = "visible"
this_link.onmouseout = hide_tooltip
}
function hide_tooltip(){
document.getElementById("tooltip").style.visibility ="hidden"
return false
}
//-->
</script>
<style media="screen" type="text/css">
<!--
#tooltip {
position: absolute;
z-index: 100;
top: 0px;
left: 0px;
visibility: hidden }
.hyperText {
color: gray;
font: 10px/12px "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
font-weight: bold;
background-color: #FFFAF0;
padding-top: 0px;
padding-bottom: 4px;
padding-left:10px;
padding-right: 5px;
border: 2px solid gray;
}
.titleTooltip{
color:white;
font-weight: bold;
border: 1px solid gray;
background-color: gray;
padding-top: 3px;
padding-bottom:3px;
padding-right: 20px;
padding-left: 5px;
margin-top: -2px;
margin-left: -10px;
margin-right: -5px;
margin-bottom: 4px;
}
-->
</style>
<!-- base --></head>
<body bgcolor="#1f1a17" link="#ffff33" vlink="#ffff99">
<div id="tooltip" class ="hyperText" > </div>
<table class="calendarTable" align="center" border="1" bordercolor="#111111" cellpadding="0" cellspacing="0">
<tbody><tr class="calendarRow">
<td class="weekheader"><b>Lu</b></td>
<td class="weekheader"><b>Ma</b></td>
<td class="weekheader"><b>Mi</b></td>
<td class="weekheader"><b>Ju</b></td>
<td class="weekheader"><b>Vi</b></td>
<td class="weekheader"><b>Sa</b></td>
<td class="weekheader"><b>Do</b></td>
</tr>
<tr class="calendarRow">
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate" align="center">
1</td>
<td class="emptydate" align="center">
2</td>
<td class="emptydate" align="center">
3</td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
4</td>
<td class="emptydate" align="center">
5</td>
<td class="emptydate" align="center">
6</td>
<td class="emptydate" align="center">
7</td>
<td class="emptydate" align="center">
8</td>
<td class="emptydate" align="center">
9</td>
<td class="emptydate" align="center">
10</td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
11</td>
<td class="emptydate" align="center">
12</td>
<td class="emptydate" align="center">
13</td>
<td class="emptydate" align="center">
14</td>
<td class="emptydate" align="center">
15</td>
<td class="emptydate" align="center">
16</td>
<td class="filledColor0" align="center">
<a target="principal" >17</a></td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
18</td>
<td class="emptydate" align="center">
19</td>
<td class="emptydate" align="center">
20</td>
<td class="emptydate" align="center">
21</td>
<td class="emptydate" align="center">
22</td>
<td class="emptydate" align="center">
23</td>
<td class="filledColor0" align="center">
<a href="javascript:void(0)" onmouseover="show_tooltip(event,this,'Real Madrid - Getafe')">24</a></td>
</tr>
<tr class="calendarRow">
<td class="emptydate" align="center">
25</td>
<td class="emptydate" align="center">
26</td>
<td class="emptydate" align="center">
27</td>
<td class="emptydate" align="center">
28</td>
<td class="emptydate" align="center">
29</td>
<td class="emptydate" align="center"><a href="javascript:void(0)" onmouseover="show_tooltip(event,this,'Real Madrid - Barcelona')">30</a></td>
<td class="filledColor0" align="center">
<a href="javascript:void(0)" onmouseover="show_tooltip(event,this,'Real Madrid - Real Sociedad')">31</a></td>
</tr>
<tr class="calendarRow">
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
<td class="emptydate"><div align="center">-</div></td>
</tr>
</tbody></table>
</body></html>
Un saludo
