javascript - 在单个工具提示中插入包含图像和文本数据的两列表

Question

我在一个网站上工作，我需要在一个工具提示中创建一个两列表（一列用于图像，另一列用于文本）。工具提示的目的是提供一个快速指南以供参考，其中包含带有标题的产品图像。更进一步，当您将鼠标悬停在“关于”或“工作”上时，我希望工具提示像在此站点上一样具有粘性。我已经做了很多研究，所以我假设这对于纯 CSS 是不可能的，但我是 Javascript 新手，所以我不太确定从哪里开始。我添加了一些代码来说明我在寻找什么。本质上，当用户将鼠标悬停在“检查此处”时，我希望橙色表格显示在工具提示中。任何帮助深表感谢。

table{
    width: 98%;
    background-color: orange;
}

td {
  border-bottom: 1px solid black;
}

img{
    width: 40px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid black;
  margin-bottom: 60px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  background-color: yellow;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<p>Not sure of what product you have?</p> 

<div class="tooltip">Check here.<span class="tooltiptext">Table should go here</span>
</div>


<table>

  <tr>
    <td><img src="site/circle.png" alt="Red circle"></td>
    <td>Circle</td>
  </tr>
  <tr>
    <td><img src="site/square.png" alt="Blue square"></td>
    <td>Square</td>
  </tr>
  <tr>
    <td><img src="site/hexagon.png" alt="Yellow hexagon"></td>
    <td>Hexagon</td>
  </tr>
</table>

标签： javascripthtmlcss

Answer 1

您非常接近纯 CSS 解决方案：只需将您的表格代码放在您当前拥有文本“表格应该放在此处”的位置。

table{
    width: 98%;
    background-color: orange;
}

td {
  border-bottom: 1px solid black;
}

img{
    width: 40px;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px solid black;
  margin-bottom: 60px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px;
  background-color: yellow;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<p>Not sure of what product you have?</p> 

<div class="tooltip">Check here.<span class="tooltiptext"><table>

  <tr>
    <td><img src="site/circle.png" alt="Red circle"></td>
    <td>Circle</td>
  </tr>
  <tr>
    <td><img src="site/square.png" alt="Blue square"></td>
    <td>Square</td>
  </tr>
  <tr>
    <td><img src="site/hexagon.png" alt="Yellow hexagon"></td>
    <td>Hexagon</td>
  </tr>
</table></span>
</div>

如果您希望工具提示像链接示例中那样粘在鼠标位置，那么您将进入 javascript 领域；这已经存在许多实现，所以我建议只选择一个适合您需求的实现（搜索“tooltip plugin javascript”会为您提供很多选择）而不是自己滚动。