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

Tout d'abord, si vous souhaitez utiliser du HTML à l'intérieur du contenu, vous devez définir l'option HTML sur true :

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

Vous avez ensuite deux options pour définir le contenu d'un Popover

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

Utilisation du contenu des données : Vous devez échapper le 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 soit échapper le HTML manuellement, soit 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. La plus simple, je pense, est de mettre le contenu de votre div caché où vous voulez, puis d'écrire une fonction pour passer son contenu à popover. Quelque chose comme ceci :

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

Et alors 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 cela vous aidera !

PS : J'ai eu quelques problèmes en utilisant le popover et en ne mettant pas l'attribut title... donc, n'oubliez pas de toujours mettre le title.

Answer 2

En s'appuyant sur la réponse de Jävi, cela peut être fait sans ID ni attributs de bouton supplémentaires, comme ceci :

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();
    }
});

Answer 3

Une autre méthode alternative si vous souhaitez simplement avoir l'aspect et la sensation de pop over. Voici la méthode. Bien sûr, il s'agit d'une méthode manuelle, mais elle est tout à fait 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();
});

Answer 4

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

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

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

HTML pour le contenu du Popover (j'utilise la classe bootstrap hide) :

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

script :

$('.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();
}});

Answer 5

En plus des autres réponses. Si vous autorisez html en option, vous pouvez passer jQuery au contenu, et il sera ajouté au contenu du popover avec tous les événements et liens. Voici la logique du code source :

• Si vous passez une fonction, elle sera appelée pour déballer les données du contenu.
• si html n'est pas autorisé, les données de contenu seront appliquées en tant que texte.
• si html autorisé et que les données du contenu sont des chaînes de caractères, il sera appliqué en tant que html

• sinon les données de contenu seront ajoutées au conteneur de contenu du popover.

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