web-dev-qa-db-fra.com

Bootstrap popover, image comme contenu

J'essaie de faire ceci:

$("a[rel=popover]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="'+$(this).data('img')+'" />'
});

mais cela ne fonctionne pas car le $ (this) .data ('img') ne fonctionne pas.

Pourquoi je fais cela, j'ai des conflits avec les modèles et le HTML dans l'attribut data-content. Je place donc la source de l'image dans un attribut data-img et j'aime la saisir et la placer dans un élément img.

J'ai essayé cela, mais ne fonctionne pas complètement:

$("a[rel=popover_img]").popover({
    html:       true,
    trigger:    'hover',
    content:    '<img src="#" id="popover_img" />'
}).hover(function(){
    $('#popover_img').attr('src',$(this).data('img'));
});

J'espère que quelqu'un pourra m'aider :)

twitter-bootstrappopover
32
Roy

Dans l'état actuel, votre this fait référence à la portée actuelle, tandis que vous voulez faire référence à l'élément auquel l'instance Popover est attachée. Cela se fait simplement en enveloppant l'expression que vous avez pour content dans une fonction:

$('a[rel=popover]').popover({
  html: true,
  trigger: 'hover',
  content: function () {
    return '<img src="'+$(this).data('img') + '" />';
  }
});

Voir la démo:

Plunker

62
merv

Une alternative à ce que merv a proposé, pour plus de simplicité, vous pouvez intégrer de nombreuses propriétés jquery au html et laisser le jquery allégé, par exemple

<a href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<img src='http://localhost:15249/img1.jpg' width='200' />">Toggle popover</a>

et appeler le popover via jquery

$('["popover"]').popover()

Points à noter lors de l'utilisation de cette approche, le data-html doit être défini sur true, sinon l'image n'est pas interprétée en html mais en texte

7
Siobhan

essaye ça

[html]

<a href="#"><i class="menu-icon fa fa-picture-o fa-3x" data-rel="popover" title="<strong>Hi, I'm Popover</strong>" data-placement="top" data-content="<img src='https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png' width=50% height=50%>"></i></a>

[javascript]

$(document).ready(function() {
$('[data-rel=popover]').popover({
  html: true,
  trigger: "hover"
});

})

[vérifiez ceci] https://jsfiddle.net/j4qptkzr/20/

1
Soesanto Salim