Czy można użyć elementu DIV jako treści dla Popover na Twitterze?

Używam tutaj popovera bootstrapa Twittera . W tej chwili, kiedy przewijam tekst popover, pojawia się okienko z samym tekstem z atrybutu <a>' data-content. Zastanawiałem się, czy w ogóle można umieścić <div>wewnątrz popover. Potencjalnie chciałbym tam użyć php i mysql, ale jeśli uda mi się uruchomić div, myślę, że mogę znaleźć resztę. Próbowałem ustawić zawartość danych jako dividentyfikator, ale to nie zadziałało.

HTML:

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

Przede wszystkim, jeśli chcesz używać HTML w treści, musisz ustawić opcję HTML na true:

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

Następnie masz dwie opcje ustawienia zawartości Popover

• Użyj atrybutu data-content. Jest to opcja domyślna.
• Użyj niestandardowej funkcji JS, która zwraca zawartość HTML.

Korzystanie z treści danych : musisz zmienić znaczenie zawartości HTML, na przykład:

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

Możesz ręcznie zmienić kod HTML lub użyć funkcji. Nie znam PHP, ale w Railsach używamy * html_safe *.

Korzystanie z funkcji JS : Jeśli to zrobisz, masz kilka opcji. Myślę, że najłatwiejszym rozwiązaniem jest umieszczenie zawartości div w dowolnym miejscu, a następnie napisanie funkcji, która przekaże jej zawartość do popover. Coś takiego:

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

Twój kod HTML wygląda następująco:

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

Mam nadzieję, że to pomoże!

PS: Miałem kłopoty używając popover i nie ustawiając atrybutu title ... więc pamiętaj, aby zawsze ustawiać tytuł.

Opierając się na odpowiedzi jävi, można to zrobić bez identyfikatorów lub dodatkowych atrybutów przycisków, takich jak ten:

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

Inna alternatywna metoda, jeśli chcesz po prostu uzyskać efekt wyskoku. Oto metoda. Oczywiście jest to rzecz ręczna, ale ładnie wykonalna :)

HTML - przycisk

<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óźniony na przyjęcie. Opierając się na innych rozwiązaniach. Potrzebowałem sposobu, aby przekazać docelową DIV jako zmienną . Oto co zrobiłem.

HTML dla źródła Popover (dodano wyskakujący atrybut danych, który będzie zawierał wartość dla docelowego identyfikatora / lub klasy DIV):

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

HTML dla zawartości Popover (używam klasy bootstrap hide):

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

Scenariusz:

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

Oprócz innych odpowiedzi. Jeśli zezwolisz htmlna opcje, możesz przekazać jQueryobiekt do treści i zostanie on dołączony do zawartości popover ze wszystkimi zdarzeniami i powiązaniami. Oto logika z kodu źródłowego:

• jeśli przekażesz funkcję, zostanie ona wywołana w celu rozpakowania danych zawartości
• jeśli htmlnie jest dozwolone, dane o treści zostaną zastosowane jako tekst
• jeśli jest to htmldozwolone, a dane treści są ciągami, zostaną zastosowane jakohtml
• w przeciwnym razie dane treści zostaną dołączone do kontenera zawartości popover

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

Wszystkie te odpowiedzi pomijają bardzo ważny aspekt!

Używając .html, innerHtml lub externalHtml, w rzeczywistości nie używasz elementu, do którego się odwołuje. Używasz kopii kodu HTML elementu. Ma to poważne wady.

1. Nie możesz użyć żadnych identyfikatorów, ponieważ zostaną one zduplikowane.
2. Jeśli załadujesz zawartość za każdym razem, gdy pojawi się popover, stracisz wszystkie dane wprowadzone przez użytkownika.

To, co chcesz zrobić, to załadować sam obiekt do 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();


});

Dlaczego tak skomplikowane? po prostu umieść to:

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>