Implementación de un cuadro de información contextual

Question

Tengo un calendario, y cuando el usuario se desplaza sobre una celda, aparece un cuadro de información grande con detalles para esa fecha. Tengo problemas para hacer desaparecer el cuadro de información cuando el usuario se va.

Básicamente lo quiero para que cuando el cursor del mouse se salga de la celda de calendario que está oculta en el cuadro de información, desaparecerá. Pero estoy teniendo problemas con esto porque mouseenter y mouseleave se arruinan al tener el cuadro de información como el elemento superior.

Así que traté de evitar esto usando divs "placeholders" que son transparentes, tienen la misma forma y ubicación que la celda del calendario debajo de ellos, y tienen un índice z de 1000 para que estén encima del cuadro de información. A continuación, aplico los eventos mouseenter y mouseleave a estos divs.

Sin embargo, hay dos problemas con esto. Uno, ahora he arruinado mi HTML semánticamente. Los divs no tienen otro propósito que sortear lo que parece ser una limitación. Y en segundo lugar, estropean mi selección de jQuery UI (la he aplicado a las celdas del calendario; un clic ya no selecciona una celda).

¿Hay una manera limpia de manejar la visualización de un cuadro de información? No habrá interacción del usuario con el cuadro de información, solo se mostrará información.

EDITAR: Aquí hay un código:

<li> 
    <div class="day-content"> 
    </div> 
    <div class="day-content-placeholder"> 
    </div> 
</li> 

y CSS

li 
    { position: absolute; width: 15%; height: 20%; top: ... left: ... } 
.day-content 
    { position: absolute; width: 100%; height: 100%; } 
.day-content-placeholder 
    { position: absolute; width: 100%; height: 100%; z-index: 1000; } 
.popup 
    { position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; } 

y Javascript

var popup; 
$('.week-content-placeholder') 
    .mouseenter(function() 
     { 
     popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this); 
     }) 
    .mouseleave(function() 
     { 
     popup.remove(); 
     }); 

Ese no es el código exacto, pero se entiende la idea. Esto funciona bien, pero como he dicho, dado que .week-content-placeholder está por encima de .week-content, la capacidad de selección con jQuery UI no funciona correctamente en .week-content.

Answer 1

Se podría modificar su solución con los divs transparentes "marcador de posición" de la siguiente manera:

tienen el "marcador de posición" buceo por debajo de la "célula calendario", usando {zIndex: -1}.

Cuando ingresa una celda de calendario, muestra el div grande de "contenido" y establece {zIndex: 1000} en el divisor de "marcador de posición" para ponerlo en la parte superior.

Tenga un evento "mouseout" en el marcador de posición div que ocultará el div "content" y establezca {zIndex: -1} para la celda "marcador de posición".

En lugar de crear las celdas de "marcador de posición" en el HTML, puede crear una en el javascript y moverla a la posición de cada celda "calendario" mientras la "mouseIn". También podría duplicar cualquier evento de "clic" en la "celda de calendario" en este también.

Avísame si esto funciona.

Answer 2

Aquí hay 15 plugins diferentes que le permiten hacer esto con jQuery:

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

Answer 3

usted podría seguir mousemouse y utilizar el ancho offsetLeft + y la altura offsetTop + de su disparador vuelo estacionario contra el evento .pageX y event.pageY para comparar.

Answer 4

Si hace que esto funcione como describió un pequeño movimiento del mouse que permanece dentro de la celda del calendario (que ni siquiera es visible) deja la ventana emergente en su lugar, pero un movimiento ligeramente mayor que sale de la celda hace que la ventana desaparezca.

El usuario solo ve el movimiento dentro de la ventana emergente — pequeño movimiento dentro de la ventana emergente lo deja en su lugar; un gran movimiento lo hace desaparecer.

Sugiero activar la desaparición de la ventana emergente al salir de la ventana emergente en sí. Cualquier movimiento que permanezca dentro del panel de "punta" lo deja arriba. Creo que (1) esto es una mejor usabilidad y (2) evita todo el problema con el manejo oculto de evento de celdas de calendario.

Puede hacerlo agregando un controlador .mouseleave() al div cuando lo crea.

Answer 5

El truco aquí es hacer que el cuadro de información a un niño de la célula:

<div id='box'> 
    Normal content 
    <div id='inner'> 
     This big box obscures everything in the cell! 
    </div> 
</div> 

La caja interior se oculta hasta que se produzca el vuelo estacionario. Observe cómo con CSS podemos hacer que el cuadro sea más grande que la celda en sí con márgenes negativos.

#box 
{ 
    width:100px; 
    height:100px; 
    margin:100px; 
    border:solid 2px darkblue; 
    position:relative; 
} 
#box #inner 
{ 
    display:none; 
    position:absolute; 
    background-color:#eeee00; 
    top:-10px; 
    left:-10px; 
    width:120px; 
    height:120px; 
} 

Y puede utilizar la libración jQuery normal porque el vuelo estacionario tapas de las cajas de la caja y que es hijo:

$('#box').hover(function(){ 
    $('#inner').show(); 
},function(){ 
    $('#inner').hide(); 
}); 

Aquí está funcionando:

http://jsfiddle.net/RbqCT/

Puede crear la info box dinámicamente como lo hace en su código.