鼠標/鼠標懸停在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;
}

當您將鼠標懸停在“信息”上時，它將在div中顯示帶有class ='tooltip'的文本。 JavaScript（例如，任何jQuery工具提示插件）具有帶有更多選項的解決方案。

Answer 2

標記示例

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

希望這可以幫助..

Answer 3

我以前使用過Tooltip JS 。 它運行得非常好，我認為這對您有好處。