Tooltip se sale de pantalla

Juanjo87 · 16 Dic 2016

No se si este tema debería ir aquí, si no es así que me lo mueva algún moderador y disculpe las molestias 🙂

El caso es que estoy creando una especie de tooltip a través de ajax en jquery, para wordpress. Este aparece cuando pulsas encima de una imagen, dentro de una galería. Todo funciona bien el único problema es que si la imagen esta ubicada a la derecha de la pantalla, el tooltip, al ser un div con posicion absoluta, se sobresale de la pantalla.

Como puedo evitar que el div se salga de la pantalla con jquery?

por ejemplo, si pulso en la imagen que esta mas a la derecha, el div-tooltip se alinee a la izquierda.

No se si se me a entendido

Cicklow · 16 Dic 2016

mmm tendrias que controlar si el mouse esta cerca del costado de la pantalla, sumandole a eso el tamaño del toolltip (relativo, ya que este puede cambiar)...

digamos 100 (px del tooltip) + la posisionX/Y del mouse...

PHP:

if(100 + mouseX>$(window).width()){
//aca le asignas al tooltip menos sobre el eje X... o haces que aparezca hacia la izquierda de la imagen
}else if(100 + mouseY>$(window).height()){
//aca le asignas al tooltip menos sobre el eje Y... o haces que aparezca hacia arriba de la imagen
}else{
//aca lo dejas asi sin nada
}

Juanjo87 · 16 Dic 2016

Gracias cicklow pero no termino de entender el codigo para configularlo.
pongo el codigo que tengo para que lo veas a ver si me puedes ayudar

PHP:

<script type="text/javascript">
function showFicha_tooltip(id){
var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";



	  
	$("#tooltip-ajax"+ id).fadeIn(500) .html("<div id='load-ajax'>loading...</div>");		
	
	jQuery.post(
		ajaxurl,
		{
		    'action': 'tooltip_ajax',
		    'post_id':   id
		}, 
		
	    function(response){
            
			    $("#tooltip-ajax"+ id).html(response);
		
		
		     	$("img").click(function()
       {
		    $("#tooltip-ajax"+ id).fadeOut(500);
		   $('.info_menu').remove();
	   });  
 
	
	    }
	);
}

</script>

PHP:

<li class="licar">
<div class="tooltip-ajax" id="tooltip-ajax<?php echo $post->ID;?>" ></div>
    <a  href="tooltip-ajax" onclick="showFicha_tooltip('<?php echo $post->ID;?>','tooltip_ajax','tooltip-ajax'); return false;">
       
	    

        <img data-src="<?php the_post_thumbnail_url( 'medium' ); ?>" class="lazyOwl"/>

        <h3><?php echo $post->post_title; ?></h3>



    </a>

</li>

Insertar CODE, HTML o PHP:

.tooltip-ajax{margin-left: 5%; display: none; width: 10%;z-index: 999; background: purple; position: absolute}

- - - Actualizado - - -

yo pensaba que podia detectar la posición del tooltip, y si este, estaba cerca de la ventana, se le añada una clase. por ejemplo .tooltip-right{margin-right: 5%; margin-left: 0;} o algo asi, no se si me explico

pero no se como detectar si el div esta cerca de la ventana

sevilla666 · 16 Dic 2016

Por lo que veo tiene un id:
Puedes saber la posición del tool tip así:

Insertar CODE, HTML o PHP:

var posicion = document.getElementById('id-tool-tip').getBoundingClientRect();
alert(posicion.top+" "+posicion.right+" "+posicion.bottom+" "+posicion.left);

Tendrías que meterle un condicional según coordenadas.

Juanjo87 · 16 Dic 2016

sevilla666, cuando dices condicional se refiere a algo como esto verdad?

Insertar CODE, HTML o PHP:

var foo = true;
var bar = false;
if (bar) {
    // este código nunca se ejecutará
    console.log('hello!');
}
if (bar) {
    // este código no se ejecutará
} else {
    if (foo) {
        // este código se ejecutará
    } else {
        // este código se ejecutará si foo y bar son falsos (false)
    }
}

me ayudas con el codigo?

sevilla666 · 16 Dic 2016

Te voy a intentar ayudar, pero para mi se me hace muy dificil crear código si no lo puedo probar, si hay alguien que ve errores que no dude en corrijirme.

Entiendo que el <div> en cuestión es este:

Insertar CODE, HTML o PHP:

<div class="tooltip-ajax" id="tooltip-ajax<?php echo $post->ID;?>" ></div>

Entonces seria:

Insertar CODE, HTML o PHP:

var posicion = document.getElementById("tooltip-ajax"+ id).getBoundingClientRect();

if (posicion.left > 40){  //puedes usar posicion.top posicion.right posicion.bottom posicion.left
document.getElementById("tooltip-ajax"+ id).style.marginRight = "0px";  // También puede ser marginTop marginbottom
}


if (posicion.top > 40){
document.getElementById("tooltip-ajax"+ id).style.marginLeft = "0px";
}

Tienes que ir jugando con los margenes-

todo CREO que lo tendrias que poner debajo de estas lineas:
" $("img").click(function()
{ "

Esta hecho en Javascript porque con el método position() de jquery no funciona el calculo del margen Right y margen bottom

EDITO:
he modificado "#tooltip-ajax" por "tooltip-ajax"

Juanjo87 · 16 Dic 2016

Pues la verdad que es lo que estoy buscando, y funciona casi a la perfección, excepto que ahora el tooltip se me esconde en la parte derecha de la pantalla.

digamos que la galería de imágenes aparece así

Imagen a | imagen b | imagen c |......

las imágenes se encuentran en posición horizontal.

cuando pincho en la ultima "la que esta mas pegada a la derecha de la ventana" el tooltip se desplaza a la izquierda y no se esconde, esto perfecto

pero si pincho en la primera imagen " la que esta pegada a la izquierda de la ventana" el tooltip tmb se me desplaza a la izquierda y se esconde.

estoy toqueteando el código haber si lo consigo pero de momento nada. Por si me puedes echar una mano

Insertar CODE, HTML o PHP:

var posicion = document.getElementById("tooltip-ajax"+ id).getBoundingClientRect();

if (posicion.left > 40){  //puedes usar posicion.top posicion.right posicion.bottom posicion.left
document.getElementById("tooltip-ajax"+ id).style.marginRight = "0px";  // También puede ser marginTop marginbottom
}


if (posicion.top > 40){
document.getElementById("tooltip-ajax"+ id).style.marginLeft = "-250px";
}

- - - Actualizado - - -

vale, no funciona xq se le añade los dos margenes al div, he estado mirando y probando y es que cada vez que aparece el div se le asigna los dos margenes que le doy con el código que me pasaste, que es lo que esta saliendo mal?

sevilla666 · 17 Dic 2016

if (posicion.left > 40){
Esta linea significa que "si la distancia es MAYOR de 40" hasta el borde left
ejecutara esto:
document.getElementById("tooltip-ajax"+ id).style.marginRight = "0px";
que significa que la distancia al borde del navegador right se cambiará a 0

Te puse en comentarios que puedes usar //puedes usar posicion.top posicion.right posicion.bottom posicion.left
y tambien puedes usar marginTop marginbottom.
Tienes que cambiar los valores 40, 0, position.right..position.left, marginTop marginbottom, etc por lo que necesites.

También comentarte que posiblemente según el tamaño de pantalla del usuario que lo vea tendrás que adaptarlo un poco mas, este tema lo comenta el usuario Feddy en el tema: http://forobeta.com/javascript/535040-script-que-detecte-movil-y-tablet-y-que-salga-mensaje-pantalla.html

También puedes usar el simbolo "MENOR QUE" "<" ejemplo;

Insertar CODE, HTML o PHP:

if (posicion.left < 26){
ejecuta........

Saludos

Tooltip se sale de pantalla

Juanjo87

Cicklow

Juanjo87

sevilla666

Juanjo87

sevilla666

Juanjo87

sevilla666

Temas similares