Javascript 如何使用 Twitter Bootstrap 中的 popover 显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11075560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I use popover from Twitter Bootstrap to display an image?
提问by Scott C Wilson
The canonical example for Twitter Bootstrap's popover feature is sort of a tooltip on steroids with a title.
Twitter Bootstrap 的 popover 功能的典型示例是带有标题的类固醇工具提示。
HTML:
HTML：
<a href="#" id="blob" class="btn large primary" rel="popover" data-content="And here's some amazing content. It's very engaging. right?" data-original-title="A title">hover for popover</a>
JS:
JS：
<script>
$("#blob").popover({offset: 10});
</script>
I'd like to use popover to display an image. Is this possible?
我想使用 popover 来显示图像。这可能吗？
回答by Terry
Very simple :)
很简单 ：）
<a href="#" id="blob" class="btn large primary" rel="popover">hover for popover</a>
var img = '<img src="https://si0.twimg.com/a/1339639284/images/three_circles/twitter-bird-white-on-blue.png" />';
$("#blob").popover({ title: 'Look! A bird!', content: img, html:true });
回答by Joe Adkins
Sort of similar to what mattbtay said, but a few changes. needed html:true.
Put this script on bottom of the page towards close body tag.
有点类似于 mattbtay 所说的，但有一些变化。需要 html:true。
将此脚本放在页面底部，靠近 body 标签。
<script type="text/javascript">
$(document).ready(function() {
$("[rel=drevil]").popover({
placement : 'bottom', //placement of the popover. also can use top, bottom, left or right
title : '<div style="text-align:center; color:red; text-decoration:underline; font-size:14px;"> Muah ha ha</div>', //this is the top title bar of the popover. add some basic css
html: 'true', //needed to show html of course
content : '<div id="popOverBox"><img src="http://www.hd-report.com/wp-content/uploads/2008/08/mr-evil.jpg" width="251" height="201" /></div>' //this is the content of the html box. add the image here or anything you want really.
});
});
</script>
Then HTML is:
然后 HTML 是：
<a href="#" rel="drevil">mischief</a>
回答by Tito100
simple with generated links :) html:
简单的生成链接:) html:
<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span>
js:
js：
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
回答by mattbtay
This is what I used.
这是我用的。
$('#foo').popover({
placement : 'bottom',
title : 'Title',
content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});
and for the HTML
和 HTML
<b id="foo" rel="popover">text goes here</b>
回答by Pepsimax
Here I have an example of Bootstrap 3 popover showing an image with the tittle above it when the mouse hovers over some text. I've put in some inline styling that you may want to take out or change.....
这里我有一个 Bootstrap 3 popover 的例子，当鼠标悬停在一些文本上时，它显示了一个带有标题的图像。我已经放入了一些您可能想要删除或更改的内联样式.....
This also works pretty well on mobile devices because the image will popup on the first tap and the link will open on the second. html:
这也适用于移动设备，因为图像会在第一次点击时弹出，链接将在第二次点击时打开。html：
<h5><a href="#" title="Solid Tiles Template" target="_blank" data-image-url="http://s29.postimg.org/t5pik8lyf/tiles1_preview.jpg" class="preview" rel="popover" style="color: green; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 1 <i class="fa fa-external-link"></i></a></h5>
<h5><a href="#" title="Clear Tiles Template" target="_blank" data-image-url="http://s9.postimg.org/rdonet7jj/tiles2_2_preview.jpg" class="preview" rel="popover" style="color: red; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 2 <i class="fa fa-external-link"></i></a></h5>
<h5><a href="#" title="Clear Tiles Template" target="_blank" data-image-url="http://s27.postimg.org/8scrcdu9v/tiles3_3_preview.jpg" class="preview" rel="popover" style="color: blue; font-style: normal; font-weight: bolder; font-size: 16px;">Template Preview 3 <i class="fa fa-external-link"></i></a></h5>
js:
js：
$('.preview').popover({
'trigger':'hover',
'html':true,
'content':function(){
return "<img src='"+$(this).data('imageUrl')+"'>";
}
});
