Est-il possible d'utiliser un div comme contenu pour Popover de Twitter

J'utilise le popover de bootstrap de Twitter ici . En ce moment, lorsque je fais défiler le texte popover, un popover apparaît avec juste du texte de l <a>' data-contentattribut s . Je me demandais s'il y avait de toute façon à mettre un <div>à l'intérieur du popover. Potentiellement, j'aimerais utiliser php et mysql là-dedans, mais si je pouvais faire fonctionner un div, je pense que je peux comprendre le reste. J'ai essayé de définir le contenu des données sur un dividentifiant, mais cela n'a pas fonctionné.

HTML:

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

Tout d'abord, si vous souhaitez utiliser HTML dans le contenu, vous devez définir l'option HTML sur true:

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

Ensuite, vous avez deux options pour définir le contenu d'un Popover

• Utilisez l'attribut data-content. Ceci est l'option par défaut.
• Utilisez une fonction JS personnalisée qui renvoie le contenu HTML.

Utilisation du contenu de données : vous devez échapper au contenu HTML, quelque chose comme ceci:

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

Vous pouvez échapper manuellement au code HTML ou utiliser une fonction. Je ne connais pas PHP mais dans Rails, nous utilisons * html_safe *.

Utilisation d'une fonction JS : Si vous faites cela, vous avez plusieurs options. Le plus simple, je pense, est de mettre votre contenu div caché où vous le souhaitez, puis d'écrire une fonction pour transmettre son contenu au popover. Quelque chose comme ça:

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,
    content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

Et puis votre HTML ressemble à ceci:

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

J'espère que ça aide!

PS: J'ai eu quelques problèmes lors de l'utilisation du popover et de la non-définition de l'attribut title ... alors, n'oubliez pas de toujours définir le titre.

En vous basant sur la réponse de jävi, cela peut être fait sans identifiant ni attribut de bouton supplémentaire comme celui-ci:

http://jsfiddle.net/isherwood/E5Ly5/

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My first popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My second popover content goes here.</div>

<button class="popper" data-toggle="popover">Pop me</button>
<div class="popper-content hide">My third popover content goes here.</div>

$('.popper').popover({
    container: 'body',
    html: true,
    content: function () {
        return $(this).next('.popper-content').html();
    }
});

Une autre méthode alternative si vous souhaitez simplement avoir une apparence et une sensation de pop over. Voici la méthode. Bien sûr, c'est une chose manuelle, mais bien réalisable :)

HTML - bouton

<button class="btn btn-info btn-small" style="margin-right:5px;" id="bg" data-placement='bottom' rel="tooltip" title="Background Image"><i class="icon-picture icon-white"></i></button>

HTML - popover

<div class="bgform popover fade bottom in">
            <div class="arrow"></div>
             ..... your code here .......
</div>

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});

En retard à la fête. Construire sur les autres solutions. J'avais besoin d'un moyen de passer le DIV cible en tant que variable . Voici ce que j'ai fait.

HTML pour la source Popover (ajout d'un attribut de données data-pop qui contiendra la valeur de l'ID / ou de la classe DIV de destination):

<div data-html="true" data-toggle="popover" data-pop="popper-content" class="popper">

HTML pour le contenu Popover (j'utilise la classe de masquage bootstrap):

<div id="popper-content" class="hide">Content goes here</div>

Scénario:

$('.popper').popover({
placement: popover_placement,
container: 'div.page-content',
html: true,
trigger: 'hover',
content: function () {
    var pop_dest = $(this).attr("data-pop");
    //console.log(plant);
    return $("#"+pop_dest).html();
}});

En plus d'autres réponses. Si vous autorisez les htmloptions, vous pouvez passer un jQueryobjet au contenu, et il sera ajouté au contenu du popover avec tous les événements et liaisons. Voici la logique du code source:

• si vous passez une fonction, elle sera appelée pour dérouler les données de contenu
• si ce htmln'est pas autorisé, les données de contenu seront appliquées sous forme de texte
• si htmlautorisé et que les données de contenu sont des chaînes, elles seront appliquées commehtml
• sinon les données de contenu seront ajoutées au conteneur de contenu de la popover

$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});

Toutes ces réponses manquent un aspect très important!

En utilisant .html ou innerHtml ou externalHtml, vous n'utilisez pas réellement l'élément référencé. Vous utilisez une copie du code HTML de l'élément. Cela présente de sérieux inconvénients.

1. Vous ne pouvez utiliser aucun identifiant car les identifiants seront dupliqués.
2. Si vous chargez le contenu à chaque fois que le popover est affiché, vous perdrez toutes les entrées de l'utilisateur.

Ce que vous voulez faire est de charger l'objet lui-même dans le popover.

https://jsfiddle.net/shrewmouse/ex6tuzm2/4/

HTML:

<h1> Test </h1>

<div><button id="target">click me</button></div>

<!-- This will be the contents of our popover -->
<div class='_content' id='blah'>
<h1>Extra Stuff</h1>
<input type='number' placeholder='number'/>
</div>

JQuery:

$(document).ready(function() {

    // We don't want to see the popover contents until the user clicks the target.
    // If you don't hide 'blah' first it will be visible outside of the popover.
    //
    $('#blah').hide();

    // Initialize our popover
    //
    $('#target').popover({
        content: $('#blah'), // set the content to be the 'blah' div
        placement: 'bottom',
        html: true
    });
    // The popover contents will not be set until the popover is shown.  Since we don't 
    // want to see the popover when the page loads, we will show it then hide it.
    //
    $('#target').popover('show');
    $('#target').popover('hide');

    // Now that the popover's content is the 'blah' dive we can make it visisble again.
    //
    $('#blah').show();


});

Pourquoi si compliqué? mettez simplement ceci:

data-html='true'

here is an another example

<a   data-container = "body" data-toggle = "popover" data-placement = "left" 
    data-content = "&lt;img src='<?php echo baseImgUrl . $row1[2] ?>' width='250' height='100' &gt;&lt;div&gt;&lt;h3&gt; <?php echo $row1['1'] ?>&lt/h3&gt; &lt;p&gt; &lt;span&gt;<?php echo $countsss ?>videos &lt;/span&gt;
&lt;span&gt;<?php echo $countsss1 ?> followers&lt;/span&gt;
&lt;/p&gt;&lt;/div&gt;
<?php echo $row1['4'] ?>   &lt;hr&gt;&lt;div&gt;
&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Follow  &lt;/button&gt;  &lt;/span&gt; &lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt; Go to channel page&lt;/button&gt;   &lt;/span&gt;&lt;span&gt; &lt;button type='button' class='btn btn-default pull-left green'&gt;Close  &lt;/button&gt;  &lt;/span&gt;

 &lt;/div&gt;">

<?php echo $row1['1'] ?>
  </a>