将工具提示添加到列表项

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

您可以使用引导程序来显示工具提示。请使用以下代码作为参考：

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>