Est-il possible d'utiliser un div comme contenu pour le popover de Twitter ?

Question

J'utilise le popover de bootstrap de twitter. aquí . Actuellement, lorsque je fais défiler le texte du popover, un popover apparaît avec uniquement le texte de la page d'accueil. <a> 's data-content attribut. Je me demandais s'il était possible de mettre un attribut <div> à l'intérieur du popover. Potentiellement, je voudrais utiliser php et mysql là-dedans, mais si j'ai pu faire fonctionner un div, je pense que je peux comprendre le reste. J'ai essayé de mettre data-content dans un div ID, mais ça n'a pas marché.

HTML :

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

Answer 1

Toutes ces réponses passent à côté d'un aspect très important !

En utilisant .html ou innerHtml ou outerHtml, 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 pas utiliser n'importe quel identifiant car les identifiants seront dupliqués.
2. Si vous chargez le contenu à chaque fois que le popover s'affiche, vous perdrez toutes les données saisies par l'utilisateur.

Ce que vous voulez faire, c'est 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();

});

Answer 2

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>

Answer 3

Pourquoi c'est si compliqué ? Mettez juste ça :

data-html='true'