HTML dans la popover Bootstrap de Twitter

J'essaie d'afficher du HTML dans un popover bootstrap, mais d'une manière ou d'une autre, cela ne fonctionne pas. J'ai trouvé quelques réponses ici mais cela ne fonctionnera pas pour moi. Veuillez me faire 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>

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

Voici JSFiddle qui vous montre comment créer un popover bootstrap.

Les parties pertinentes du code sont ci-dessous:

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 au fait, vous devez toujours au moins $("[data-toggle=popover]").popover();activer le popover. Mais à la place de data-toggle="popover"vous, vous pouvez également utiliser id="my-popover"ou class="my-popover". N'oubliez pas de leur permettre d'utiliser par exemple: $("#my-popover").popover();dans ces cas.

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

Prime:

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

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>

Une autre façon de spécifier le contenu popover d'une manière réutilisable est de créer un nouvel attribut de données comme data-popover-contentet de 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 vos popovers.

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

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

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

J'ai utilisé un pop 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>'>

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

Ceci est une légère modification de l'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();
        }
    });
});

Je déteste vraiment mettre du long HTML à l'intérieur de l'attribut, voici ma solution, claire et simple (remplacez? 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>

puis

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

C'est une vieille question, mais c'est une autre façon, en utilisant jQuery pour réutiliser le popover et pour continuer à utiliser les attributs de données d'amorçage d'origine 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/

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

Il affichera tous les popover avec html. * son html dangereux. À utiliser uniquement si vous faites confiance au HTML.

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>

Ajoutez ceci au bas de votre fichier popper.js:

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform));

Source: https://github.com/twbs/bootstrap/issues/23590