javascript - 悬停时显示的动态定位弹出定义

Question

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

我正在寻找最有效的方法，我知道如何做我想做的事情，但我的方法效率很低而且很麻烦。

这就是我在我的网站上布置规范的方式，在 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 作为不显示和悬停显示 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>