鼠标悬停时CSS/Javascript文本框弹出显示

Question

我有一个带文本的html td 元素。我希望当你悬停在该元素上时，在当前页面/元素上方显示一个文本框，解释该td标记的内容意义。类似于<abbr>标记的某种解释。这可以通过CSS或JavaScript实现吗？

- DextrousDave

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

当鼠标指向“Info”时，它将显示具有class='tooltip'的div中的文本。使用JavaScript（例如任何jQuery工具提示插件）可以提供更多选项的解决方案。

- Frank van Wijk

---

这对于可用性来说会更好，说实话。 - mickburkejnr

谢谢。这正是我在寻找的CSS解决方案。不过，我认为JavaScript解决方案有更多的好处。 - DextrousDave

Answer 2

Example markup..

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

希望这可以帮到您。

- Teody C. Seguin

Answer 3

我之前使用过Tooltip JS。它的效果非常好，我认为对你会很有帮助。

- mickburkejnr