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来执行此操作

简单演示如下：

＆＃13;

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

＆＃13;

在你的情况下：

请注意，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>')

}

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

1 个答案: