Hola.
Me gustaria preguntarles como podria hacer que un tooltip de 200px de ancho me cambiase de tamaño al llegar al borde derecho de la pantalla para que asi me no me apareciese un scrollbar en la parte inferior de la pagina. Tambien valdria cambiarlo de posicion.
El codigo js que tengo de momento es este:
var xCursor;
var yCursor;
//Descripcion:
// Obtiene la coordenada en x del evento que recibe como parametro.
//Parametros:
// Un objeto de tipo evento.
function mouseX(evt) {
if (evt.pageX) return evt.pageX;
else if (evt.clientX)
return evt.clientX + (document.documentElement.scrollLeft ?
document.documentElement.scrollLeft :
document.body.scrollLeft);
else return null;
}
//Descripcion:
// Obtiene la coordenada en y del evento que recibe como parametro.
//Parametros:
// Un objeto de tipo evento.
function mouseY(evt) {
if (evt.pageY) return evt.pageY;
else if (evt.clientY)
return evt.clientY + (document.documentElement.scrollTop ?
document.documentElement.scrollTop :
document.body.scrollTop);
}
function mostrarTitle(evento,texto){
var div = document.getElementById('divContenidoSelect');
var sombra = document.getElementById('envoltorioContenidoSelect ');
div.innerHTML = texto;
xCursor = mouseX(evento);
yCursor = mouseY(evento);
sombra.className = 'divSombraSelect';
sombra.style.top = (yCursor+20)+'px';
sombra.style.left = (xCursor+20)+'px';
div.body.offsetHeight;
}
function ocultarTitle(){
var sombra = document.getElementById('envoltorioContenidoSelect ');
sombra.className = 'divOculto';
}
Y el HTML este:
<html>
<head>
<title>prueba</title>
<script src="funcionesComunes.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="general.css" media="screen,print"/>
</head>
<body>
<div class="divOculto" id="envoltorioContenidoSelect">
<div class="divContenidoSelect" id="divContenidoSelect"></div>
</div>
<table style="width: 100%">
<tr style="background-color:blue" onmouseover="mostrarTitle(event,'pedazodetextotrem endisimomuymuymuymuymuymuylargo')"
onmouseout="ocultarTitle()">
<td>mi fila</td>
</tr>
</table>
</body>
</html>
Os agradeceria mucho vuestra ayuda