TextBox'popup'display on mouseover/hover for CSS/Javascript

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：

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

當你將鼠標懸停在 '信息'，它會顯示在帶class = '提示' 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'); 
    } 
}); 

希望這有助於..