Implementazione di un riquadro di informazioni al passaggio del mouse

Question

Ho un calendario e quando l'utente passa su una cella, viene visualizzata una casella informativa di grandi dimensioni con i dettagli per quella data. Sto avendo qualche problema anche se la casella informativa scompare quando l'utente si allontana.

Fondamentalmente lo voglio in modo che quando il cursore del mouse si sposta fuori dalla cella del calendario che è nascosta dal riquadro delle informazioni scompare. Ma ho problemi con questo perché mouseenter e mouseleave sono incasinati avendo la casella informazioni come l'elemento in alto.

Così ho cercato di aggirare questo usando i div "segnaposto" che sono trasparenti, hanno la stessa forma e la stessa posizione della cella di calendario sotto di esso, e hanno uno z-index di 1000 in modo che siano sopra la casella di informazioni. Quindi applico gli eventi mouseenter e mouseleave a questi div.

Ci sono due problemi con questo però. Uno, ora ho incasinato il mio codice HTML semanticamente. I div non hanno scopo ma aggirare quello che sembra essere un limite. E in secondo luogo, rovinano la mia selezione dell'interfaccia utente jQuery (l'ho applicata alle celle del calendario: un clic non seleziona più una cella).

C'è un modo pulito per gestire la visualizzazione di una casella informativa? Non ci sarà alcuna interazione dell'utente con il riquadro delle informazioni, ma solo per visualizzare le informazioni.

EDIT: Ecco il codice:

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

e 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; } 

e Javascript

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

Questo non è il codice esatto, ma si ottiene l'idea. Funziona bene, ma come ho detto, poiché .week-content-placeholder è sopra lo .week-content, la capacità di selezione con l'interfaccia utente di jQuery non funziona correttamente su .week-content.

Answer 1

Si potrebbe modificare la vostra soluzione con i trasparenti div "segnaposto" nel modo seguente:

hanno il "segnaposto" tuffo sotto la "cella solare", usando {zIndex: -1}.

Quando si inserisce una cella di calendario, visualizzare il grande "contenuto" div e impostare {zIndex: 1000} sul div "segnaposto" per portarlo in cima.

Avere un evento "mouseout" sul div di segnaposto che nasconderà il div "contenuto" e impostare {zIndex: -1} per la cella "segnaposto".

Anziché creare le celle "segnaposto" nell'HTML, è possibile crearne uno in javascript e spostarlo nella posizione di ogni cella "calendario" mentre lo si fa "mouseIn". Potresti anche duplicare qualsiasi evento "clic" sulla "cella del calendario" su questo.

Fammi sapere se funziona.

Answer 2

Ecco 15 diversi plugin che consentono di fare questo con jQuery:

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

Answer 3

potreste seguire mousemouse e utilizzare la larghezza offsetLeft + e l'altezza offsetTop + del grilletto hover contro l'evento .pageX e event.pageY da confrontare.

Answer 4

Se si esegue questo lavoro come descritto un movimento del mouse piccolo che rimane all'interno della cella del calendario (che non è nemmeno visibile) lascia il popup in posizione, ma un movimento leggermente più grande che esce dalla cella fa sparire il popup.

L'utente vede solo il movimento all'interno del popup stesso — piccolo movimento all'interno del popup che lo lascia sul posto; un grande movimento lo fa andare via.

Suggerisco di attivare la scomparsa del popup all'uscita dal popup div stesso. Qualsiasi movimento che rimane all'interno del pannello "tip" lo lascia in sospeso. Penso che (1) questa sia una migliore usabilità e (2) eviti l'intero problema con la gestione dell'evento oscurata della cella del calendario.

È possibile farlo aggiungendo un gestore .mouseleave() al div quando lo si crea.

Answer 5

Il trucco è quello di rendere l'Info Box un bambino della cella:

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

La scatola interna è nascosta finché non si verifica il passaggio del mouse. Notate come con CSS possiamo rendere la scatola più grande della cella stessa con margini negativi.

#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; 
} 

Ed è possibile utilizzare il normale hover jQuery perché il passaggio del mouse copre casella casella ed è bambino:

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

Ecco che in esecuzione:

http://jsfiddle.net/RbqCT/

È possibile creare le informazioni box dinamicamente come fai nel tuo codice.