Javascript 如何使用Twitter引导中的popover来显示图像？

Twitter Bootstrap的popover功能的典型例子是一个关于类固醇的工具提示，标题是

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:

$（“#blob”）.popover（{offset:10}）；

我想用popover来显示图像。这可能吗

非常简单：）

var img=“”；
$（“#blob”）.popover（{title:'Look！A bird！'，内容：img，html:true}）；

这是我用过的

$('#foo').popover({
    placement : 'bottom',
    title : 'Title',
    content : '<div id="popOverBox"><img src="http://i.telegraph.co.uk/multimedia/archive/01515/alGore_1515233c.jpg" /></div>'
});

$（'foo'）.popover({
位置：'底部'，
标题：“标题”，
内容：“”
});

对于HTML

<b id="foo" rel="popover">text goes here</b>

文本在此显示

有点像mattbtay所说的，但有一些变化。需要的html:true
将此脚本放在页面底部靠近close 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>

$（文档）.ready（函数（）{
$（“[rel=drevil]”）。popover({
placement:'bottom'，//popover的位置。也可以使用top、bottom、left或right
标题：//这是popover的顶部标题栏。添加一些基本的css
html:'true'，//当然需要显示html
内容：“”//这是html框的内容。请在此处添加图像或任何您真正想要的内容。
});
});

那么HTML是：

<a href="#" rel="drevil">mischief</a>

---

简单，包含生成的链接：） html:

预览

js:

$（'.preview'）.popover({
“触发器”：“悬停”，
“html”：是，
“内容”：函数（）{
返回“”；
}
});

---

这里我有一个Bootstrap3Popover的例子，当鼠标悬停在某个文本上时，它会显示一个上面有标题的图像。我已经加入了一些内联样式，您可能想要删除或更改

这也适用于移动设备，因为图像将在第一次点击时弹出，链接将在第二次点击时打开。 html:

js:

$（'.preview'）.popover({
“触发器”：“悬停”，
“html”：是，
“内容”：函数（）{
返回“”；
}
});

---

html:true

是正确呈现html所必需的：（在添加了

trigger:'hover'

之后，我的工作就完成了。请您详细说明您的答案，再添加一点关于您提供的解决方案的描述。当然。您想知道什么？回答很好。如果您使用AngularJS，JavaScript需要包含在控制器初始化回调中，这可能毫无价值。）r它不会工作。请参考此链接。通过使用此链接，我认为您也应该能够显示图像。

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

<a href="#" rel="drevil">mischief</a>

<span class='preview' data-image-url="imageUrl.png" data-container="body" data-toggle="popover" data-placement="top" >preview</span>

$('.preview').popover({
    'trigger':'hover',
    'html':true,
    'content':function(){
        return "<img src='"+$(this).data('imageUrl')+"'>";
    }
});

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

$('.preview').popover({
    'trigger':'hover',
    'html':true,
    'content':function(){
        return "<img src='"+$(this).data('imageUrl')+"'>";
    }
});