Casella di testo 'popup' visualizzata al passaggio del mouse/passaggio del mouse per CSS/Javascript

Question

Ho un elemento HTML td con testo all'interno. Lo voglio in modo da poter passare con il mouse su quell'elemento e visualizzare una casella di testo sopra la pagina/elemento attivo che spiega cosa significa il contenuto del tag td. Qualche tipo di elaborazione. Come il tag <abbr>.

Questo può essere fatto in CSS o Javascript?

Answer 1

Questo è possibile con i CSS, anche con javascript. Creare una tabella con un elemento:

<table> 
<tr><td> 
    <a href="#">Info 
     <div class="tooltipcontainer"> 
      <div class="tooltip">Here some info</div> 
     </div> 
    </a> 
</td></tr> 
</table> 

CSS:

/* Container is necessary because td cannot be positioned relative */ 
td .tooltipcontainer { 
    position: relative; 
} 
td .tooltip { 
    display: none; 
    position: absolute; 
    /* More positioning, heigh, width, etc */ 
} 
td a:hover .tooltip { 
    display: block; 
} 

quando si passa sopra 'Info' mostrerà il testo nel div con class = 'tooltip'. JavaScript (per esempio qualsiasi plugin per tooltip di jQuery) ha soluzioni con più opzioni.

Answer 2

Ho usato Tooltip JS prima. Ha funzionato molto bene e penso che sarebbe vantaggioso per te.

Answer 3

Esempio di marcatura ..

<td id="1">..</td> 
<td id="2">..</td> 
<td id="thisiswhatiwanttohaveahover"><div class="tooltip hidden"></div></td> 

CSS Style

.visible { 
    display:block; 
} 

.hidden { 
    display:none; 
} 

è possibile

$('#thisiswhatiwanttohaveahover').hover(function() { 
    if ($(this + ' .tooltip').hasClass('hidden')) { 
    $(this + ' .tooltip').removeClass('hidden'); 
    $(this + ' .tooltip').addClass('visible'); 
    } 
    if ($(this + ' .tooltip').hasClass('visible')) { 
    $(this + ' .tooltip').removeClass('visible'); 
    $(this + ' .tooltip').addClass('hidden'); 
    } 
}); 

speranza che questo aiuti ..