动态定位的弹出定义，在悬停时显示

Question

我希望创建弹出式定义，以显示div何时悬停。我的网站将显示相机的详细规格，我希望当用户将鼠标悬停在名为“.mp”的百万像素级别上时，然后会在上面显示一个带有短定义的小弹出窗口。我希望它工作的一个关键方法是，我可以将类'.mp'添加到任何现有的div /类上，当它悬停在那时，弹出窗口显示上面的div / class也允许我重用定义在网站周围的多个地方。

我正在寻找最有效的方式，我知道如何做我想要做的事情，但是我的方式非常低效和繁琐。

这就是我在我的网站上列出规格的方式，在photoshop中我刚刚添加了我希望在悬停时收到的效果类型。

使用PHP从我的数据库输出所有规格，每个都有包装'.spec_item'我目前将规范的名称存储在一个数组中，可以添加到for循环中的每个div

$sensor_db = array("mp", "sensor_size", "sensor_type", "light_sensitivity");

这会创建div：

<div class="spec_item mp">
    12.9
</div>
<div class="spec_item sensor_size">
    0.95X
</div>
<div class="spec_item sensor_type">
    APS-C
</div>

当用户将鼠标悬停在任何名为“.mp”的div上时，该定义会在一个小弹出窗口下方显示，如我的图片示例所示。为了达到这个目的，我知道我可以将所有定义存储在另一个数组中，并将div设置为display none和on hover display block，但是如果我这样做，我不能简单地将类'.mp'添加到任何div和它显示了定义，这就是我想要实现的目标。

我感谢任何帮助或指导我如何解决这个问题。

Answer 1

也许这会对你有所帮助。您必须在PHP脚本中生成正确的HTML。

.tooltip-container {
  width: 200px;
  position: absolute;
  display: none;
  margin-top: 12px;
}

.arrow-up {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 12px 5px;
  border-color: transparent transparent #a6a6a6 transparent;
  position: absolute;
  top: -12px;
  left: 15%;
}

.tooltip {
  border: thin solid darkgray;
  padding: 10px;
}

h5 {
  margin: 0;
  text-align: left;
}

.mp {
  width: 200px;
  height: 50px;
  border-radius: 5%;
  background-color: red;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}

.mp:hover +.tooltip-container {
  display: block;
}

<div class="mp">
  <p>12.9</p>
</div>
<div class="tooltip-container">
  <span class="arrow-up"></span>
  <div class="tooltip">
    <h5>Hello World</h5>
    <span>Lorem ipsum dolor sit amet</span>
  </div>
</div>