Можно ли использовать div в качестве контента для Twitter'а Popover?

Я использую попсовый твиттер здесь . Сейчас, когда я прокрутка над текстом поповера поповер появляется только с текстом из <a>«s data-contentатрибута. Мне было интересно, можно ли было положить <div>внутрь поповер. Потенциально я хотел бы использовать там php и mysql, но если бы я мог заставить работать div, я думаю, что смогу выяснить все остальное. Я попытался установить data-content в divID, но это не сработало.

HTML:

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

Прежде всего, если вы хотите использовать HTML внутри контента, вам нужно установить для параметра HTML значение true:

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

Тогда у вас есть два варианта, чтобы установить контент для Popover

• Используйте атрибут data-content. Это опция по умолчанию.
• Используйте пользовательскую функцию JS, которая возвращает содержимое HTML.

Использование data-content : вам нужно экранировать 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 в любом месте, а затем написать функцию для передачи его содержимого в popover. Что-то вроде этого:

$(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 и не устанавливал атрибут title ... так что не забывайте всегда устанавливать заголовок.

Основываясь на ответе 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();
    }
});

Еще один альтернативный метод, если вы хотите просто посмотреть и почувствовать поп-ап. Ниже приведен метод. Конечно, это ручная вещь, но приятно работоспособная :)

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 (добавлен атрибут data data pop, который будет содержать значение для целевого идентификатора 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

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

Все эти ответы упускают очень важный аспект!

Используя .html, innerHtml или outerHtml, вы фактически не используете указанный элемент. Вы используете копию 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>