Posición dinámica de CSS de información sobre herramientas sobre el elemento emergente con jQuery

Question

Estoy escribiendo una información sobre herramientas simple que puede contener etiquetas HTML. Por favor, consulte http://jsfiddle.net/Qkwm8/ para la demostración.

Quiero que el cuadro de información sobre herramientas se muestre correctamente independientemente de la posición del elemento, en este caso <a>, que muestra información sobre herramientas en el evento mouseover.

la información sobre herramientas se muestran bien, excepto cuando <a> flotadores derecha (o es al final de la línea) o en la parte inferior de la pantalla en la que no aparece correctamente, aparece fuera de la pantalla

Si el <a> flota a la derecha, o al final de la línea, o está en la parte inferior de la pantalla, quiero que la información sobre herramientas cambie de posición para que permanezca visible

Gracias.

enlace Actualizar demostración

aquí está el resultado completo: http://jsfiddle.net/Qkwm8/3/

Answer 1

Puede utilizar el ancho del documento para comprobar el ancho del documento HTML es y ajustar la posición de la izquierda en consecuencia. Di:

//set the left position 
    var left = $(this).offset().left + 10; 
    if(left + 200 > $(document).width()){ 
     left = $(document).width() - 200; 
    } 

utilicé 200 aquí porque está configurando su información sobre herramientas a 200 píxeles de ancho. Algo similar se puede hacer con la altura.

También hay un ancho de ventana, pero siempre me confunde la diferencia, por lo que debe comprobar cuál le ofrece mejores resultados.

Un ejemplo de la parte inferior de la página es:

//set the height, top position 
    var height = $(this).height(); 
    var top = $(this).offset().top; 
    if(top + 200 > $(window).height()){ 
     top = $(window).height() - 200 - height; 
    } 

Una vez más, utilizando 200 ya que configura el tooltip a 200 píxeles de altura.

Answer 2

$ ('a.show-tooltips'). Mouseover (function() {

if (($ (this) .parent()). Css ('float')) == "derecho") añadir la clase apropiada a la izquierda

más -> la clase apropiada la derecha .... }