web-dev-qa-db-fra.com

HTML dans Twitter Bootstrap popover

J'essaie d'afficher du code HTML dans un popover bootstrap, mais cela ne fonctionne pas. J'ai trouvé quelques réponses ici mais ça ne marchera pas pour moi. S'il vous plaît laissez-moi savoir si je fais quelque chose de mal.

<script>
  $(function(){
    $('[rel=popover]').popover({ 
      html : true, 
      content: function() {
        return $('#popover_content_wrapper').html();
      }
    });
  });
</script>

<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title"> 
    popover
</li>

<div id="popover_content_wrapper" style="display: none">
    <div>This is your div content</div>
</div>
htmltwitter-bootstrappopover
257
Adrian Mojica

Vous ne pouvez pas utiliser <li href="#" car il appartient à <a href="#" c'est pourquoi il ne fonctionnait pas, changez-le et tout va bien.

Ici fonctionne JSFiddle ce qui vous montre comment créer bootstrap popover.

Les parties pertinentes du code sont les suivantes:

HTML: 

<!-- 
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

JavaScript: 

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

Et d'ailleurs, vous avez toujours besoin d'au moins $("[data-toggle=popover]").popover(); pour activer le popover. Mais au lieu de data-toggle="popover", vous pouvez également utiliser id="my-popover" ou class="my-popover". Rappelez-vous juste de les activer en utilisant par exemple: $("#my-popover").popover(); dans ces cas.

Voici le lien vers la spécification complète: Bootstrap Popover

Bonus:

Si pour une raison quelconque vous n'aimez pas ou ne pouvez pas lire le contenu d'un popup à partir des balises data-toggle et title. Vous pouvez également utiliser par exemple divs cachés et un peu plus de JavaScript. Voici un exemple à ce sujet.

À votre santé.

330
Mauno Vähä

vous pouvez utiliser l'attribut data-html="true":

<a href="#" id="example"  rel="popover" 
    data-content="<div>This <b>is</b> your div content</div>" 
    data-html="true" data-original-title="A Title">popover</a>
264
Dennis Knochenwefel

Une autre façon de spécifier le contenu de popover de manière réutilisable consiste à créer un nouvel attribut de données tel que data-popover-content et à l'utiliser comme ceci:

HTML:

<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>

<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
  <div class="popover-heading">
    This is the heading for #1
  </div>

  <div class="popover-body">
    This is the body for #1
  </div>
</div>

JS:

$(function(){
    $("[data-toggle=popover]").popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});

Cela peut être utile lorsque vous avez beaucoup de code HTML à placer dans votre popovers.

Voici un exemple de violon: http://jsfiddle.net/z824fn6b/

93
Jack

Vous devez créer une instance popover pour laquelle l'option html est activée (placez-la dans votre fichier javascript après le code JS popover):

$('.popover-with-html').popover({ html : true });

80
Mike Lucid

J'ai utilisé un pop over dans une liste, je donne un exemple via HTML

<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
21
user3319310

Ceci est une légère modification sur excellente réponse de Jack .

Ce qui suit garantit que les popovers simples, sans contenu HTML, restent inchangés.

JavaScript:

$(function(){
    $('[data-toggle=popover]:not([data-popover-content])').popover();
    $('[data-toggle=popover][data-popover-content]').popover({
        html : true,
        content: function() {
          var content = $(this).attr("data-popover-content");
          return $(content).children(".popover-body").html();
        },
        title: function() {
          var title = $(this).attr("data-popover-content");
          return $(title).children(".popover-heading").html();
        }
    });
});
6
Marc A

Je déteste vraiment mettre du long HTML à l'intérieur de l'attribut, voici ma solution, claire et simple (remplacer? Par ce que vous voulez):

<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
    <h2>Some title</h2>
    Some text
</a>

ensuite

var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
4
user1079877

Il vous suffit de mettre data-html="true" dans le lien popover. Ça va marcher.

3
Tiago Piovesan

C'est une vieille question, mais c'est une autre façon, en utilisant jQuery de réutiliser le popover et de continuer à utiliser les attributs de données originaux bootstrap pour le rendre plus sémantique:

Le lien

<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
   Show it!
</a>

Contenu personnalisé à afficher

<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
    <ul class="nav nav-pills nav-stacked">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Javascript

$('[rel="popover"]').popover({
    container: 'body',
    html: true,
    content: function () {
        var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
        return clone;
    }
});

Violon avec exemple complet: http://jsfiddle.net/tomsarduy/262w45L5/

3
Tom Sarduy

Vous pouvez changer le 'template/popover/popover.html' dans le fichier 'ui-bootstrap-tpls-0.11.0.js' Write: "bind-html-unsafe" au lieu de "ng-bind"

Il montrera tous popover avec HTML. * son html dangereux. Utilisez uniquement si vous faites confiance au HTML.

2
Guy Biber

Vous pouvez utiliser l'événement popover et contrôler la largeur par l'attribut 'data-width'

$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
    var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
    $("div[id^=popover]").css("max-width", width);
});
 <a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
 <i class="far fa-question-circle"></i>
 </a>
0
Vĩnh Phú Ngô