Добавить подсказку к элементу списка

Question

Я динамически добавляю текст в список следующим образом:

var list = document.getElementById('list');
var entry = document.createElement('li');
entry.appendChild(document.createTextNode('text'));
list.appendChild(entry);

Я хочу изменить это так, чтобы для элемента списка при наведении курсора на элемент отображалась всплывающая подсказка с некоторым текстом. Я нашел в Интернете пример:

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

Но я не знаю, как его совместить с li предметом

Answer 1

Установить атрибут title:

var list = document.getElementById('list');
var entry = document.createElement('li');
var text = document.createTextNode('text');
entry.appendChild(text);
entry.title = "Tooltip text";
list.appendChild(entry);

Answer 2

Вы можете использовать bootstrap для отображения всплывающей подсказки. Пожалуйста, используйте следующий код в качестве ссылки:

let list = document.getElementById('list');
let counter = 5;
while(counter-->=0) {
  var span = document.createElement('text');
  span.setAttribute('data-toggle', 'tooltip');
  span.setAttribute('title', 'This is tooltip');
  span.textContent = 'text';
  
  var entry = document.createElement('li');
  entry.appendChild(span);
  list.appendChild(entry);
}
$("#list li text").tooltip();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div id="list"></div>