文本框'弹出窗口'在鼠标悬停/悬停上显示CSS/Javascript

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

本文关键字：悬停 Javascript 显示 CSS 窗口 文本 鼠标      更新时间：2023-09-26

我有一个html td元素，里面有文本。我想要它，这样你就可以将鼠标悬停在该元素上，并在活动页面/元素的顶部显示一个文本框，解释td标记的内容意味着什么。某种阐述。就像<abbr>标签一样。

这可以用CSS或Javascript完成吗？

这在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"上时，它将在div中显示class＝"tooltip"的文本。JavaScript（例如任何jQuery工具提示插件）有更多选项的解决方案。

示例标记。。

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

希望这能有所帮助。。

我以前使用过Tooltip JS。它运行得非常好，我认为这对你有益。

相关文章：