Ist es möglich, ein div als Inhalt für das Popover von Twitter zu verwenden?

Ich verwende hier das Popover von Twitter's Bootstrap . Gerade jetzt, wenn ich über den popover Text scrollen ein popover erscheint mit nur Text aus dem <a>‚s - data-contentAttribute. Ich habe mich gefragt, ob es überhaupt einen Platz <div>im Popover gibt. Möglicherweise würde ich dort gerne PHP und MySQL verwenden, aber wenn ich ein Div zum Laufen bringen könnte, könnte ich den Rest herausfinden. Ich habe versucht, Dateninhalt auf eine divID zu setzen, aber es hat nicht funktioniert.

HTML:

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

Wenn Sie HTML innerhalb des Inhalts verwenden möchten, müssen Sie zunächst die HTML-Option auf true setzen:

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

Dann haben Sie zwei Möglichkeiten, den Inhalt für ein Popover festzulegen

• Verwenden Sie das Dateninhaltsattribut. Dies ist die Standardoption.
• Verwenden Sie eine benutzerdefinierte JS-Funktion, die den HTML-Inhalt zurückgibt.

Verwenden von Dateninhalten : Sie müssen den HTML-Inhalt wie folgt umgehen:

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

Sie können den HTML-Code entweder manuell maskieren oder eine Funktion verwenden. Ich weiß nichts über PHP, aber in Rails verwenden wir * html_safe *.

Verwenden einer JS-Funktion : Wenn Sie dies tun, haben Sie mehrere Möglichkeiten. Ich denke, das Einfachste ist, Ihren div-Inhalt zu verstecken, wo immer Sie wollen, und dann eine Funktion zu schreiben, um seinen Inhalt an Popover zu übergeben. Etwas wie das:

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

Und dann sieht Ihr HTML so aus:

<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>

Ich hoffe es hilft!

PS: Ich hatte einige Probleme bei der Verwendung von Popover und beim Nichteinstellen des Titelattributs. Denken Sie also daran, immer den Titel festzulegen.

Aufbauend auf der Antwort von jävi kann dies ohne IDs oder zusätzliche Schaltflächenattribute wie folgt erfolgen:

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

Eine weitere alternative Methode, wenn Sie nur das Erscheinungsbild von Pop Over wünschen. Es folgt die Methode. Natürlich ist dies eine manuelle Sache, aber gut praktikabel :)

HTML - Schaltfläche

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

Spät zur Party. Aufbauend auf den anderen Lösungen. Ich brauchte einen Weg, um das Ziel-DIV als Variable zu übergeben . Hier ist was ich getan habe.

HTML für Popover-Quelle (ein Datenattribut Data-Pop wurde hinzugefügt , das den Wert für die Ziel-DIV-ID / oder -Zahl enthält ):

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

HTML für Popover-Inhalte (ich verwende die Bootstrap-Hide-Klasse):

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

Skript:

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

Neben anderen Antworten. Wenn Sie htmlOptionen zulassen, können Sie ein jQueryObjekt an den Inhalt übergeben. Es wird mit allen Ereignissen und Bindungen an den Inhalt des Popovers angehängt. Hier ist die Logik aus dem Quellcode:

• Wenn Sie eine Funktion übergeben, wird diese aufgerufen, um Inhaltsdaten zu entpacken
• Wenn dies htmlnicht zulässig ist, werden Inhaltsdaten als Text angewendet
• Wenn dies htmlzulässig ist und die Inhaltsdaten eine Zeichenfolge sind, werden sie als angewendethtml
• Andernfalls werden Inhaltsdaten an den Inhaltscontainer von Popover angehängt

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

All diesen Antworten fehlt ein sehr wichtiger Aspekt!

Wenn Sie .html oder innerHtml oder OuterHtml verwenden, verwenden Sie das referenzierte Element nicht. Sie verwenden eine Kopie des HTML-Codes des Elements. Dies hat einige schwerwiegende Nachteile.

1. Sie können keine IDs verwenden, da die IDs dupliziert werden.
2. Wenn Sie den Inhalt jedes Mal laden, wenn das Popover angezeigt wird, verlieren Sie alle Benutzereingaben.

Sie möchten das Objekt selbst in das Popover laden.

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


});

Warum so kompliziert? Einfach gesagt:

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>