Add tooltip to list item

Question

I dynamically add text to a list like such:

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

I want to modify this so that for the list item, when you hover over the item it will show a tooltip with some text. I found example online:

Hover over me
  Tooltip text

But I don't know how to combine it with the li item

user_1540854 · Answer

Set the title attribute:

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);

user_1177814 · Answer

You can use bootstrap to display tooltip. Please use following code as a reference:

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();

Add tooltip to list item

2 Answers