Вставить tooltips (всплывающие подсказки) в определенный class?

Question

Можно ли вставить (не изменяя структуру html) при помощи javascript иконки в конец тегов <a>, при наведении на которых, показывались бы всплывающие подсказки (tooltips)? Подсказки нужно сделать с разным текстом в зависимости от разных классов menu-19 и menu-20.

<span class="wpcf7-form-control-wrap menu-19">
  <a class="trigger" href="#">Телефон/Мессенджер</a>
</span>

<span class="wpcf7-form-control-wrap menu-20">
  <a class="trigger" href="#">Специалист</a>
</span>

Answer 1

Механизм всплывашек можно сделать на CSS, а из JS только организовать вставку нужных элементов. Так, чтобы на выходе получился такой HTML:

<a class="trigger" href="#">
  Телефон/Мессенджер

  <span class="tooltip">[ i ]</span>
  <div class="msg">Сообщение...</div>
</a>

Тогда можно сделать .msg { display: none; } и .tooltip:hover + .msg { display: block; }

let tips = {
  "19": "tip - 19",
  "20": "tip - 20<br>Moo",
}; // Список сообщений

let wrap = document.querySelectorAll(".wpcf7-form-control-wrap");

for (let i = 0; i < wrap.length; i++) {
  let key_number = wrap[i].className.match(/menu-(\d+)/)[1];
  // \d — цифра (digit), плюсик — один или много штук.
  // match возвращает массив ["menu-19", "19"], откуда берется [1]-й элемент ("19")

  let a = wrap[i].querySelector("a.trigger");
  
  a.insertAdjacentHTML("beforeEnd", icon(key_number));
}

function icon(n) {
  return (
    '<span class="tooltip">[ i ]</span>' +
    '<div class="msg">' + tips[n] + '</div>'
  );
}

a.trigger {
  position: relative; /* Удержать absolute всплывашку в рамках этого элемента */
}

a.trigger .tooltip {
  margin-left: 10px;
  font-weight: bold;
  color: #045acf;
}

a.trigger .tooltip + .msg {
  display: none;
  
  position: absolute;
  top: 1.2em;
  left: 0;
  
  width: 100%; /* ширина ссылки */
  min-width: 150px; /* или 150px, если вдруг она оказалось очень короткой */
  
  padding: 5px;
  box-sizing: border-box;
  
  background-color: #fff1ba;
  border: 2px solid orange;  
  color: black;
}

a.trigger .tooltip:hover + .msg {
  display: block;
}

<span class="wpcf7-form-control-wrap menu-19">
  <a class="trigger" href="#">Телефон/Мессенджер</a>
</span>

<span class="wpcf7-form-control-wrap menu-20">
  <a class="trigger" href="#">Специалист</a>
</span>

БЛОГ НА HUSL

Вставить tooltips (всплывающие подсказки) в определенный class?

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