通过带有烧瓶和Python的Bootstrap动态弹出/工具提示

Question

I'm trying to create dynamically generated tooltip/popover content for a site using bootstrap (3.1), flask and python.

I have hyper-linked items in a table. When I mouse over those hyperlinks, I want a tooltip to appear; when the user clicks on the hyperlink I want them to go to the individual item page. Code (shortened for brevity):

<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>

then in 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>

Next: the content of what I want to be in the popover/tooltip box:

<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>

I put this in a script on my page:

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

I'm wondering if this part of the script is even possible?

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

EDIT TO ADD: (it's not, it threw a server error)
EDIT again: It had to be

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

On what element should I add the rel=popover?

Answer 1

I would give each item a static class like tool tip or give the table an id and use jQuery selector on the element in the table for the hover event. $(document).ready(function(){ $('td.tooltip').popover({ html: true, placement: 'right', trigger: 'hover', selector: '[rel="popover"]' }); }) ;