如何使气泡出现在文本上的悬停上

Question

我想显示一个语音框，其中包含悬停时的文本信息或图像。当鼠标移动悬停的文本时，语音框的显示就像Wikipedia。我曾尝试通过创建一些代码来尝试，但问题是该框与悬停的文本不对齐，并且在文本中添加语音框的情况下，我无法在段落中使用语音框。希望您能理解我想知道的内容，如果不尝试，我将像Wikipedia一样帮助您创建一个信息框。

我编写的代码：-

.hide {
  display: none;
}

.speech {
  position: relative;
  width: 400px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background-color: #fff;
  border: 8px solid #666;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: 2px 2px 4px #888;
  -moz-box-shadow: 2px 2px 4px #888;
  box-shadow: 2px 2px 4px #888;
  display: none;
}

.speech:after {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 38px;
  top: 100px;
  border: 15px solid;
  border-color: #fff transparent transparent #fff;
}

.speech:before {
  content: ' ';
  position: absolute;
  width: 0;
  height: 0;
  left: 30px;
  top: 100px;
  border: 25px solid;
  border-color: #666 transparent transparent #666;
}

.myDIV:hover+.speech {
  display: block;
  color: red;
}

<h2>Display an Element on Hover</h2>


<div class="myDIV">Hover over me.</div>
<div class="speech">I am shown when someone hovers over the div above.</div>

Answer 1

1. 将您的div放在另一个相对定位的div内。
2. 语音div应该是相对父div的第一个孩子，并且位置绝对。
3. 然后您可以通过如下样式来调整语音div：“ top：xxpx; left：xxpx”。

您应该具有相对位置的父级div，以便可以根据父级的位置调整您的讲话泡泡。

下面是一个例子：

<div style="position:relative;">
    <div style='position:absolute' class="speech">I am shown when someone hovers over the div above.</div>
    <div class="myDIV">Hover over me.</div>
</div>