<p>Наведите на квадрат, чтобы увидеть подсказку</p>

<div class="tltp" data-template="otkr"></div>
<div class="tltp" data-template="skol"></div>

<div class="tooltip-content__item" id="otkr">
  <img style="width: 100%;" src="https://sereja-art.ru/_next/image?url=http%3A%2F%2Flocalhost%3A1337%2Fuploads%2Furban_samurai_1200x600_ccbdb36462.jpg&w=640&q=75" alt="">
  <p>&laquo;Понравилась оперативная коммуникация, процессы взаимодействия, умение решать нестандартные задачи&raquo;</p>
</div>
<div class="tooltip-content__item" id="skol">
  <p>&laquo;Менеджеры берут на&nbsp;себя ответственность и&nbsp;не&nbsp;работают бездумно&raquo;</p>
</div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

.tltp {
  display: inline-block;
  width: 80px;
  height: 80px;
  background: #222;
}

.tooltip-content__item {
  display: none;
}

tippy(".tltp", {
  content(reference) {
    const id = reference.getAttribute("data-template");
    const template = document.getElementById(id);
    if (template) {
      return template.innerHTML;
    } else {
      return null;
    }
  },
  allowHTML: true,
  hideOnClick: false,
  maxWidth: 468,
  placement: "bottom-end"
});