Javascript 将用户特定信息显示到标题工具提示中
我的问题是,当用户将鼠标悬停在其姓名上时,如何显示该用户特定列表中的用户信息。我已经列出了这个列表,但我想从数据库中获取数据,并将其作为工具提示或他们信息的弹出窗口附加。我使用flask将数据信息放在元素的标题部分,但它将为所有元素显示一个用户名。这里有一些代码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
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