javascript - 将用户特定信息显示到标题工具提示中

Question

我的问题是，当用户将鼠标悬停在其姓名上时，如何显示特定于该用户的列表中的用户信息。我已经列出了列表，但我想从数据库获取数据并将其附加为工具提示或信息的弹出窗口。我已经使用 Flask 将数据信息放在元素的标题部分，但它会显示所有元素的一个用户名。这是一些代码。

HTML:
<div id='avdiv'>
  <h1 id='myh1av'>Available</h1>
  <ol id='avlist'>
    <li id='avli'></li>
  </ol>
</div>

Flask
@app.route('/allfirefightersavailability', methods=['GET', 'POST'])
def allfirefightersavailability():
info = FireFighter.query.filter_by(availability='AVAILABLE').all()
avlist = []
for i in info:
    avlist.append({'name':i.name, 'availability': i.availability, 'time': 
    i.avtimestamp})
return jsonify(avlist)

JS
setInterval(function(){
allfirefightersavailability()
}, 1000);


function allfirefightersavailability(){
$('#avlist').children().remove(),
$.getJSON('/allfirefightersavailability',
function(data){
  for (var i = 0; i < data.length; i++){
    $('#avlist').append("<li id='avli'>" + data[i].name + '|' + data[i].time 
    + "</li>" + '<br><br>')
    $('#avli').tooltip(data[i].name)  //<---This Keeps Giving Me A Type 
                                  //Error: $(...).tooltip() is not a 
                                                            //function 
    }
});
}

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
</script>
<!-- <script src="https://code.jquery.com/jquery-1.8.0.min.js"></script> -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="{{ url_for('static', filename='retrieve.js') }}"></script>

Answer 1

如果您只想悬停一个元素并显示一些信息，您可以使用 title 来做到这一点

简单的演示如下:

<ul>
  <li title="1st">A</li>
  <li title="2nd">B</li>
  <li title="3rd">C</li>
</ul>

在你的情况下:

请注意，id 应该是唯一的。

for (var i = 0; i < data.length; i++){
    $('#avlist').append("<li id='avli'"+ i +" title='"+ data[i].name +"'>" + data[i].name + '|' + data[i].time + "</li>" + '<br><br>')

}