动态弹出窗口/工具提示通过Bootstrap with flask＆python

我正在尝试为使用bootstrap（3.1），flask和python的站点创建动态生成的工具提示/弹出窗口内容。动态弹出窗口/工具提示通过Bootstrap with 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

在什么元素，我要补充的相对=酥料饼？

来源

2014-02-27 Melanie Sumner

它抛出了什么服务器错误？你可以显示瓶服务器跟踪？ –

我会给每个项目一个类似工具提示的静态类，或者为表提供一个id，并在表中为元素悬停事件使用jQuery选择器。 $(document).ready(function(){ $('td.tooltip').popover({ html: true, placement: 'right', trigger: 'hover', selector: '[rel="popover"]' }); });

来源

2014-02-28 00:35:29 user3362885

我试过这个 - 但是当我将鼠标悬停在任何单个元素上时，它会显示所有的弹出框。尽管如此，我认为这是正确的。^_ ^ –

动态弹出窗口/工具提示通过Bootstrap with flask＆python

回答

相关问题