Как заставить речевой пузырь появляться при наведении на текст

Question

Я хочу отобразить речевое окно, которое содержит текстовую информацию или изображение при наведении курсора. Когда мышь перемещает скрытый текст, речевое окно появляется точно так же, как Википедия. Я пытался создать какой-то код, но проблема в том, что поле не выровнено по тексту, на который наведен текст, и я не могу использовать речевое поле в абзаце, когда я добавляю речевое поле в текст, который получает текст, делая отдельный пункт , Я надеюсь, вы поймете, что я хочу знать, если не попробуете мне помочь создать информационное окно, как Википедия.

Код, который я написал: -

.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".
4. Измените css, чтобы показывать .speech при нахождении родительского div.

У вас должен быть относительный позиционируйте родительский 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>