Сделать обучение/подсказку на выбранный блок

Question

Возник вопрос, нужно сделать, что-то типа обучения. Допустим у меня есть список. Надо, чтобы весь список был затемнен, а нужный элемент подсвечивался и возможно на темном фоне было еще пояснение. Вызов подсказки чтобы проходил как-то так, $('#needed').teachTool("Чтобы перейти на эту страницу, надо выбрать второй пункт");

<ul>
     <li>Первый пункт</li>
     <li id='needed'>Второй пункт</li>
     <li>Третий пункт</li>
</ul>

Может есть какой-то плагин, готовое решение или наброски чего-то похожего? Хотелось, что-то такое.

Answer 1

Задача то не сложная

Получаем все элементы списка то есть li

Потом на методе массивов forEach проходим по этим элементам и получаем первого ребёнка этого элемента то есть el.children[0] и вставляем из этой выборки то что находится внутри el таким способом: children[0].innerHTML = el.dataset.tooltype

mousemove - это аналог hover

mouseout - это то когда мы вышли за область наведения

Всё остальное это обычный css и его основы есть на MDN

Ну и весь пример:

let child = document.querySelectorAll("ul li");

child.forEach(function(el) {
  let ch = el.children[0];

  el.onmousemove = function() {
    ch.innerHTML = el.dataset.tooltype;
  }
  el.onmouseout = function() {
    ch.innerHTML = " ";
  }
});

* {
  text-decoration: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
}

ul {
  display: block;
  padding: 10px 20px;
  width: 400px;
  position: relative;
}

ul:hover {
  background: #888;
}

ul li:hover {
  background: #fff;
  display: inline-block;
  padding: 2px;
}

ul li a {
  color: #666;
  font-size: 1.2em;
}

ul li a:hover {
  color: #000;
}

ul li span {
  position: absolute;
  right: 10px;
  top: 10px;
}

<ul>
  <li data-tooltype="Подсказка к первому пункту меню">
    <span></span>
    <a href="#">Первая ссылка</a>
  </li>
  <li data-tooltype="Подсказка к второму пункту меню">
    <span></span>
    <a href="#">Вторая ссылка</a>
  </li>
  <li data-tooltype="Подсказка к третьему пункту меню">
    <span></span>
    <a href="#">Третья ссылка</a>
  </li>
  <li data-tooltype="Подсказка к четвёртому пункту меню">
    <span></span>
    <a href="#">Четвёртая ссылка</a>
  </li>
</ul>

БЛОГ НА HUSL

Сделать обучение/подсказку на выбранный блок

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