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

151

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

Antworten:

305

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.

jävi
quelle
5
Zu Ihrer Information, Bootstrap hat eine Klasse namens "verstecken", die Anzeige setzt: keine
Domenic
1
Nur eine Anmerkung, aber dieser Ansatz ist für IE7 furchtbar langsam, vermutlich weil die Kopie des HTML-Codes viele DOM-Manipulationen erfordert. Nach unserer Erfahrung ist es in IE7 nicht verwendbar, daher müssen Sie es auf eine andere Weise festzurren.
Philw
Wenn Sie feststellen, dass Sie eine Javascript-Funktion benötigen, die an einen in Ihrem Link enthaltenen Link angehängt ist popover_content_wrapper, verursacht diese Lösung Probleme, da sie in HTML gerendert wird (ohne Ihre Handler). Die Lösung besteht dann darin, auf das Ereignis "insert.bs.popover" zu warten und Ihren Handler erneut an das neue Element anzuhängen, das sich jetzt im DOM befindet.
Ryan Shillington
42

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

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();
});
Ein kluger Arbeiter
quelle
Dies funktionierte für mich, obwohl ich den Ort des Popovers fest verdrahten musste, was nicht großartig ist, z. B. die Verwendung style="top: 200px; left: 90px;des bgformDiv. Gibt es eine Möglichkeit, stattdessen den automatischen Platzierungscode von bootstrap aufzurufen? Sie können auch fadeToggle () oder einfach toggle () für verschiedene Effekte im Javascript verwenden.
Racing Tadpole
Dies ist der einzig richtige Weg. html () erstellt eine Kopie, sodass sie für Datenbindungszwecke nicht mehr funktioniert. Es gibt auch kein Ereignis zum Einbinden in den Status vor dem Übergang, sodass Sie keine Bindung an das Popover herstellen können, bis es sichtbar ist.
Daryl Teo
11

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();
}});
Roman K.
quelle
Können Sie eine Geige hinzufügen? Dies funktioniert nicht sofort.
RedSands
8

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

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


});
Spitzmaus
quelle
1
Wenn ich dies 100 Mal positiv bewerten könnte, würde ich. Ich habe meinen Schwanz für immer verfolgt, um herauszufinden, warum das Aufrufen von $ ('#' + id) .val () im Popup immer wieder eine leere Zeichenfolge zurückgab. Es ist wegen des verdammten HTML, das eine Kopie des div macht.
Ntellect13
-1

Warum so kompliziert? Einfach gesagt:

data-html='true'
Sulung Nugroho
quelle
Bitte erklären Sie und fügen Sie eine Geige oder einen vollständigen Code hinzu. Das ist so wie es ist nicht hilfreich.
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
quelle