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

Javascript 将用户特定信息显示到标题工具提示中,javascript,jquery,html,flask,Javascript,Jquery,Html,Flask,我的问题是,当用户将鼠标悬停在其姓名上时,如何显示该用户特定列表中的用户信息。我已经列出了这个列表,但我想从数据库中获取数据,并将其作为工具提示或他们信息的弹出窗口附加。我使用flask将数据信息放在元素的标题部分,但它将为所有元素显示一个用户名。这里有一些代码 HTML: <div id='avdiv'> <h1 id='myh1av'>Available</h1> <ol id='avlist'> <li id='avli

我的问题是,当用户将鼠标悬停在其姓名上时,如何显示该用户特定列表中的用户信息。我已经列出了这个列表,但我想从数据库中获取数据,并将其作为工具提示或他们信息的弹出窗口附加。我使用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>
HTML:
可用
  • 瓶子 @app.route('/allfirefightersavailability',methods=['GET','POST']) def allfirefightersavailability(): info=FireFighter.query.filter_by(availability='AVAILABLE').all() avlist=[] 有关我的个人信息: append({'name':i.name,'availability':i.availability,'time': i、 avtimestamp}) 返回jsonify(avlist) JS setInterval(函数(){ allfirefightersavailability() }, 1000); 函数allfirefightersavailability(){ $('#avlist').children().remove(), $.getJSON(“/allfirefightersavailability”, 功能(数据){ 对于(变量i=0;i”)+data[i]。name+'|'+data[i]。时间 +“”+”

    ”) $('#avli')。工具提示(数据[i]。名称)//
    如果您只想悬停一个元素并显示一些信息,可以使用
    title

    简单演示如下:

    • A
    • B
    • C