[英]Dynamic popover/tooltip via Bootstrap with flask & python
我正在嘗試使用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?
我會給每個項目一個靜態類,如工具提示,或者給表一個ID並在表中的元素上使用jQuery選擇器進行懸停事件。 $(document).ready(function(){ $('td.tooltip').popover({ html: true, placement: 'right', trigger: 'hover', selector: '[rel="popover"]' }); })
;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.