CSS/Javascriptのmou​​seover/hoverにテキストボックス 'popup'が表示されます

Question

テキストが内部にあるhtml td要素があります。私はあなたがその要素の上にマウスを置くことができるようにし、アクティブなページ/要素の上にテキストボックスを表示して、そのtdタグの内容が何を意味するのかを説明します。ある種の精緻化。 <abbr>タグのように。

これはCSSまたはJavascriptで行うことができますか？

Answer 1

これはCSSでも可能で、javascriptでも可能です。要素を持つテーブルを作成します。

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

CSS：あなたは 'INFO' にカーソルを合わせると

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

それは、クラス= 'ツールチップ' でのdiv内のテキストが表示されます。 JavaScript（例えば、任意のjQueryツールチッププラグイン）には、より多くのオプションを持つソリューションがあります。このことができます

Answer 2

これまでにTooltip JSを使用しました。それは本当にうまくいったし、あなたにとって有益だと思う。

Answer 3

例のマークアップ...

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

CSSスタイル

.visible { 
    display:block; 
} 

.hidden { 
    display:none; 
} 

あなたことができ

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

希望..