web-dev-qa-db-fra.com

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

J'utilise le popover bootstrap de Twitter ici . Pour le moment, lorsque je fais défiler le texte survolé, il apparaît avec le texte de l'attribut <a>'s data-content. Je me demandais s'il y avait quand même une façon de mettre un <div> à l'intérieur du popover. Potentiellement, je voudrais utiliser php et mysql, mais si je pouvais obtenir une div au travail, je pense pouvoir comprendre le reste. J'ai essayé de définir le contenu des données sur un ID div, mais cela n'a pas fonctionné.

HTML:

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

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.

tilisation de data-content: 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 manuellement le code HTML, soit utiliser une fonction. Je ne connais pas PHP, mais dans Rails, nous utilisons * html_safe *.

tilisation d'une fonction JS: Si vous faites cela, vous avez plusieurs options. Le plus simple est de mettre votre contenu div caché où vous voulez, puis d'écrire une fonction pour transmettre son contenu à 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 de popover et de la non définition de l'attribut title ... souvenez-vous de toujours définir le titre.

296
jävi

En s'appuyant sur la réponse de jävi, cela peut être fait sans identifiants 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();
    }
});
42
isherwood

Une autre méthode si vous souhaitez simplement avoir l’aspect de pop-over. Voici la méthode. Bien sûr, ceci est une chose manuelle, mais joliment exploitable :)

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();
});
11
A Bright Worker

En retard à la fête. Construire 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 pour la classe DIV id/ou destination):

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

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

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

En plus d'autres réponses. Si vous autorisez html dans les options, vous pouvez passer l'objet jQuery au contenu. Ce dernier sera ajouté au contenu de Popover avec tous les événements et les 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 html n'est pas autorisé, les données de contenu seront appliquées sous forme de texte
  • si html autorisé et que les données de contenu sont sous forme de chaîne, elles seront appliquées sous la forme html
  • sinon, les données de contenu seront ajoutées au conteneur de contenu de popover
$("#popover-button").popover({
    content: $("#popover-content"),
    html: true,
    title: "Popover title"
});
8
Birbone

Toutes ces réponses manquent 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 a de sérieux inconvénients.

  1. Vous ne pouvez utiliser aucun identifiant car celui-ci sera dupliqué.
  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, 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();


});
2
shrewmouse

Pourquoi si compliqué? il suffit de mettre ceci:

data-html='true'
0
Sulung Nugroho