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

151

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>
Kirby
la source

Réponses:

305

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.

jävi
la source
5
FYI, bootstrap a une classe appelée "hide" qui définit display: none
Domenic
1
Juste une note, mais cette approche est terriblement lente pour IE7, probablement parce que la copie du html implique beaucoup de manipulation DOM. D'après notre expérience, il n'est pas utilisable dans IE7, vous devez donc le fixer d'une autre manière.
philw
Si vous constatez que vous avez besoin d'une fonction javascript attachée à un lien qui se trouve à l'intérieur de votre popover_content_wrapper, cette solution posera des problèmes car elle est rendue en html (sans vos gestionnaires). La solution est alors d'écouter l'événement "insert.bs.popover" et de rattacher votre gestionnaire au nouvel élément qui est maintenant dans le DOM.
Ryan Shillington
42

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();
    }
});
isherwood
la source
11

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();
});
Un travailleur brillant
la source
Cela a fonctionné pour moi, même si j'ai dû câbler l'emplacement du popover, ce qui n'est pas génial, par exemple en utilisant style="top: 200px; left: 90px;le bgformdiv. Existe-t-il un moyen d'appeler le code de placement automatique de bootstrap à la place? En outre, vous pouvez utiliser fadeToggle () ou simplement toggle () pour différents effets dans le javascript.
Racing Tadpole
C'est la seule manière correcte. html () crée une copie, la rendant impraticable à des fins de liaison de données. Il n'y a pas non plus d'événement pour le raccordement à l'état de pré-transition, vous ne pouvez donc pas vous lier au popover tant qu'il n'est pas visible.
Daryl Teo
11

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();
}});
Roman K
la source
Pouvez-vous ajouter un violon? Cela ne fonctionne pas hors de la boîte.
RedSands
8

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"
});
Birbone
la source
5

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


});
musaraigne
la source
1
Si je pouvais voter 100 fois, je le ferais. J'ai pourchassé ma queue pour toujours essayer de comprendre pourquoi appeler $ ('#' + id) .val () dans la fenêtre contextuelle renvoyait une chaîne vide. C'est à cause du html qui fait une copie du div.
Ntellect13
-1

Pourquoi si compliqué? mettez simplement ceci:

data-html='true'
Sulung Nugroho
la source
Veuillez expliquer et ajouter un violon ou un code complet. Ce n'est pas utile en l'état.
RedSands
-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>
Dinesh Sarak
la source