通过Bootstrap与Flask和Python实现动态弹出框/工具提示

Question

我正在尝试为一个网站创建动态生成的提示框/弹出框内容，使用的是bootstrap（3.1）、flask和python。

我在一个表格中有一些超链接的项目。当我把鼠标放在这些超链接上时，我希望能出现一个提示框；而当用户点击这个超链接时，我希望他们能跳转到对应的项目页面。代码（简化了以便于阅读）：

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Quantity</th>
      <th>Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{% include 'itemlink.html' %}</td>
      <td>12</td>
      <td>red</td>
  </tbody>
</table>

然后在itemlink.html中：

 <a href="{{linkitem.get_url()}}" class="itemlink" data-item-id="{{linkitem.id}}">
   <img src="{{linkitem.image}}" alt="Item {{linkitem.id}}" class="smallicon" />
     {{linkitem|safe}}
 </a>

接下来：我想放在弹出框/提示框里的内容：

<div id="item_{{boxitem.id}}" class="itembox">
    <div class="itemimage">
      <img src="{{boxitem.image}}" alt="{{boxitem.name}}" title="{{boxitem.get_title()}}" />
   </div>
   <div class="iteminfo">
     <div class="itemtitle">
       {{boxitem.get_title()}}
     </div>
     <div class="itemdesc">
        {% autoescape off %}{{boxitem.get_desc()}}{% endautoescape %}
      </div>
     </div>  
    </div>

我在我的页面上放了这个脚本：

<script>
  $(document).ready(function(){
   $('#item_{{item.id}}').popover({
     html: true,
     placement: 'right',
     trigger: 'hover',
     selector: '[rel="popover"]'
   });
  });
 </script>

我在想这个脚本的这一部分是否真的可行？

  $('#item_{{item.id}}').popover({

补充说明：（其实不行，它报了服务器错误）
再补充一次：必须是

$('.itembox#item_'+$(this).data(itemID')).popover

我应该在什么元素上添加rel=popover？

Answer 1

我会给每个项目一个静态的类，比如叫做“工具提示”，或者给表格一个ID，然后用jQuery选择器来处理表格中元素的悬停事件。这样，当你把鼠标放在某个单元格上时，就会出现提示信息。

$(document).ready(function(){ $('td.tooltip').popover({ html: true, placement: 'right', trigger: 'hover', selector: '[rel="popover"]' }); });