HTML dans Twitter Popover Bootstrap

J’essaie d’afficher le code HTML dans un pop-up bootstrap, mais cela ne fonctionne pas. J’ai trouvé des réponses ici mais cela ne fonctionnera pas pour moi. S’il vous plaît laissez-moi savoir si je fais quelque chose de mal.

 $(function(){ $('[rel=popover]').popover({ html : true, content: function() { return $('#popover_content_wrapper').html(); } }); });  
  • popover
  • This is your div content

    Vous ne pouvez pas utiliser

  • car il appartient à c'est pourquoi cela ne fonctionnait pas, changez-le et tout va bien.
  • Voici JSFiddle qui montre comment créer un pop-up bootstrap.

    Les parties pertinentes du code sont ci-dessous:

    HTML:

      Example popover 

    JavaScript:

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

    Et bien sûr, vous avez toujours besoin d'au moins $("[data-toggle=popover]").popover(); pour activer le popover. Mais à la place 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 fiche 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-toggle et title . Vous pouvez également utiliser des divs cachés et un peu plus de JavaScript. Voici un exemple à ce sujet.

    À votre santé.

    vous pouvez utiliser l’atsortingbut data-html="true" :

     popover 

    Vous devez créer une instance de 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 });

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

    HTML:

      Popover Example   

    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 HTML à placer dans vos popovers.

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

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

      

    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, ne sont pas affecté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 HTML à l’intérieur de l’atsortingbut, voici ma solution, claire et simple (remplacez-la par ce que vous voulez):

      

    Some title

    Some text

    puis

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

    Ceci est une ancienne question, mais c’est une autre manière, en utilisant jQuery pour réutiliser le popover et pour continuer à utiliser les atsortingbuts de données bootstrap originaux pour le rendre plus sémantique:

    Le lien

      Show it!  

    Contenu personnalisé à afficher

       

    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’ Write: “bind-html-unsafe” au lieu de “ng-bind”

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