Здравствуйте, подскажите как лучше реализовать данный блок

Question

При наведении на точку вылезает блок с информации

Answer 1

Самый варварский метод ^-^

.test {
  position: relative;
  width: min(720px, 100%);
}

.test>img {
  width: 100%;
}

.test-dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: blue;
  cursor: pointer;
  transition: .5s;
}

.test-dot-1 {
  left: 7.5%;
  top: 47%;
}

.test-dot-2 {
  left: 13%;
  top: 89%;
}

.test-dot-3 {
  left: 31%;
  top: 22%;
}

.test-dot-4 {
  left: 46%;
  top: 69%;
}

.test-dot-5 {
  left: 54%;
  top: 13%;
}

.test-dot-6 {
  left: 59%;
  top: 20%;
}

.test-dot-7 {
  left: 69%;
  top: 26%;
}

.test-dot-8 {
  left: 82%;
  top: 58%;
}

.test-dot-1 .test-dot-info,
.test-dot-2 .test-dot-info,
.test-dot-3 .test-dot-info,
.test-dot-4 .test-dot-info,
.test-dot-5 .test-dot-info {
  left: 25px;
}

.test-dot-6 .test-dot-info,
.test-dot-7 .test-dot-info,
.test-dot-8 .test-dot-info {
  right: 25px;
}

.test-dot-info {
  position: absolute;
  background-color: #fff;
  font-family: consolas;
  padding: 0 24px 12px 24px;
  display: none;
  z-index: 99;
  width: 220px;
  color: #000;
  top: 0;
  cursor: none;
}

.test-dot-info>p {
  padding: 0;
  margin: 4px 0;
  color: orange;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .2em;
}

.test-dot:hover {
  background-color: royalblue;
}

.test-dot:hover .test-dot-info {
  display: block;
}

<div class="test">
  <img src="https://i.stack.imgur.com/jv0uf.png">

  <div class="test-dot test-dot-1">
    <div class="test-dot-info">
      <p>Задняя лампа ^-^</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry..
    </div>
  </div>

  <div class="test-dot test-dot-2">
    <div class="test-dot-info">
      <p>Колёса</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>

  <div class="test-dot test-dot-3">
    <div class="test-dot-info">
      <p>Сиденья</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>

  <div class="test-dot test-dot-4">
    <div class="test-dot-info">
      <p>Педали</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>

  <div class="test-dot test-dot-5">
    <div class="test-dot-info">
      <p>Руль 1</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>

  <div class="test-dot test-dot-6">
    <div class="test-dot-info">
      <p>Руль 2</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>

  <div class="test-dot test-dot-7">
    <div class="test-dot-info">
      <p>Ковш</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>

  <div class="test-dot test-dot-8">
    <div class="test-dot-info">
      <p>Передняя зашита</p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </div>
  </div>
</div>

БЛОГ НА HUSL

Здравствуйте, подскажите как лучше реализовать данный блок

Ответы (1 шт):