Comment utiliser Popover de Twitter Bootstrap pour afficher une image?

Question

L'exemple canonique de la fonctionnalité Popover de Twitter Bootstrap est en quelque sorte une info-bulle sur les stéroïdes avec un titre.

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:

 <script>
$("#blob").popover({offset: 10});
</script>
 

J'aimerais utiliser popover pour afficher une image. Est-ce possible?

Answer 1

Très 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 });​​​
 

http://jsfiddle.net/weuWk/

Answer 2

Un peu comme ce que Mattbtay a dit, mais quelques changements. avait besoin de html: true.
Placez ce script en bas de la page vers la balise body close.

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

Alors HTML est:

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

Answer 3

simple avec des liens générés :) html:

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

js:

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

http://jsfiddle.net/A4zHC/

Answer 4

C'est ce que j'ai utilisé.

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

et pour le HTML

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

Answer 5

S'il vous plaît se référer à ce lien. En utilisant cela, je pense que vous devriez également pouvoir afficher une image.

http://stackoverflow.com/questions/8494291/can-i-use-html-tags-in-twitter-bootstrap-popover- data-content