Чи можливо використовувати div як вміст для Twitter's Popover

Я використовую поповеров Bootstrap Твіттера в тут . Прямо зараз, коли я прокручую над текстом перепон, з'являється popover із просто текстом з атрибута <a>'s data-content. Мені було цікаво, чи можна все-таки покласти <div>всередину попову. Потенційно я хотів би використати там php та mysql, але якщо я можу примусити діва працювати, я думаю, я можу розібратися з рештою. Я спробував встановити вміст даних для divідентифікатора, але це не спрацювало.

HTML:

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

Перш за все, якщо ви хочете використовувати HTML всередині вмісту, вам потрібно встановити параметр HTML на істинне:

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

Тоді у вас є два варіанти встановлення вмісту для Poverver

• Використовуйте атрибут data-content. Це параметр за замовчуванням.
• Використовуйте спеціальну функцію JS, яка повертає вміст HTML.

Використання вмісту даних : Вам потрібно вийти з вмісту HTML, приблизно так:

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

Ви можете залишити HTML вручну або скористатися функцією. Я не знаю про PHP, але в Rails ми використовуємо * html_safe *.

Використання функції JS : Якщо ви це зробите, у вас є кілька варіантів. Найпростіше, на мою думку, - помістити вміст Div приховано куди завгодно, а потім написати функцію, щоб передати його вміст на перехоплення. Щось на зразок цього:

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

І тоді ваш HTML виглядає так:

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

Сподіваюся, це допомагає!

PS: У мене виникли проблеми під час використання popover та невстановлення атрибута заголовка ... тож пам’ятайте, що завжди встановлюйте заголовок.

Спираючись на відповідь jävi, це можна зробити без ідентифікаторів або додаткових атрибутів кнопок, як це:

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

Ще один альтернативний метод, якщо ви хочете просто виглядати і відчувати поп-над. Далі йде метод. Offcourse це ручна річ, але добре підходить :)

HTML - кнопка

<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 - переповнення

<div class="bgform popover fade bottom in">
            <div class="arrow"></div>
             ..... your code here .......
</div>

JS

$("#bg").click(function(){
        $('.bgform').slideToggle();
});

Пізно на вечірку. Вибудовуючи інші рішення. Мені знадобився спосіб передати цільовий DIV як змінну . Ось що я зробив.

HTML для джерела Popover (додано атрибут даних pop-data, який буде містити значення для ідентифікатора DIV або / або класу призначення):

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

HTML для вмісту Popover (я використовую клас прихованого завантаження):

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

Сценарій:

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

Окрім інших відповідей. Якщо ви дозволите htmlв параметрах, ви можете передати jQueryоб'єкт до контенту, і він буде доданий до вмісту перехоплення з усіма подіями та прив'язками. Ось логіка вихідного коду:

• якщо ви передасте функцію, вона буде викликана розгортанням даних про вміст
• якщо htmlзаборонено, дані вмісту будуть застосовані як текст
• якщо htmlдозволено, а дані вмісту є рядковими, вони будуть застосовані якhtml
• в іншому випадку дані про вміст будуть додані до контейнера вмісту, що переживає

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

Усі ці відповіді пропускають дуже важливий аспект!

Використовуючи .html або innerHtml або externalHtml, ви фактично не використовуєте посилається елемент. Ви використовуєте копію html елемента. Це має кілька серйозних недоліків.

1. Ви не можете використовувати будь-які ідентифікатори, оскільки ідентифікатори будуть дублюватися.
2. Якщо ви завантажуватимете вміст кожного разу, коли буде показано прохід, ви втратите весь вхід користувача.

Те, що ви хочете зробити, - це завантажувати сам предмет у поповер.

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


});

Чому так складно? просто поставте це:

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>