Affichage 'popup' de la zone de texte au survol/survol pour CSS/Javascript

Question

J'ai un élément html td avec le texte à l'intérieur. Je le veux afin que vous puissiez survoler cet élément et afficher une zone de texte au-dessus de la page/l'élément actif expliquant ce que signifie le contenu de cette balise td. Une sorte d'élaboration. Comme l'étiquette <abbr>.

Est-ce que cela peut être fait en CSS ou en Javascript?

Answer 1

Ceci est possible avec CSS, également avec javascript. Créer une table avec un élément:

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

Lorsque vous passez la souris sur 'Info' il affichera le texte dans la div avec 'infobulle' = classe. JavaScript (par exemple, n'importe quel plugin tooltip jQuery) a des solutions avec plus d'options.

Answer 2

J'ai déjà utilisé Tooltip JS avant. Cela a très bien fonctionné et je pense que ce serait bénéfique pour vous.

Answer 3

balisage exemple ..

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

style CSS

.visible { 
    display:block; 
} 

.hidden { 
    display:none; 
} 

vous pouvez

$('#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'); 
    } 
}); 

espérons que cette aide ..