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

Ответ 1

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

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

Затем у вас есть два варианта установки содержимого для Popover

• Используйте атрибут 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 скрыт везде, где вы хотите, а затем напишите функцию, чтобы передать ее содержимое в 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... поэтому не забудьте всегда устанавливать заголовок.

Ответ 2

На основе ответа 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();
    }
});

Ответ 3

Другой альтернативный метод, если вы хотите просто выглядеть и чувствовать поп. Ниже приведен метод. 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-popover

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

JS

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

Ответ 4

Поздняя вечеринка. Создание других решений. Мне нужен способ передать целевой DIV в качестве переменной . Вот что я сделал.

HTML для источника Popover (добавлен атрибут data data-pop, который будет содержать значение для DIV id/или класса назначения):

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

HTML для содержимого Popover (я использую класс bootstrap hide):

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

Script:

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

Ответ 5

В дополнение к другим ответам. Если вы разрешаете html в параметрах, вы можете передать объект jQuery на контент, и он будет добавлен для добавления содержимого со всеми событиями и привязками. Вот логика из исходного кода:

• Если вы передадите функцию, она будет вызываться для разворачивания данных контента.
• Если html не разрешено, данные контента будут применяться как текст
• Если html разрешено, а содержимое данных - строка, оно будет применяться как html
• в противном случае данные контента будут добавлены в контейнер содержимого контейнера

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

Ответ 6

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

Используя .html или innerHtml или outerHtml, вы фактически не используете ссылочный элемент. Вы используете копию элемента html. У этого есть некоторые серьезные отступления.

• Вы не можете использовать любые идентификаторы, потому что идентификаторы будут дублированы.
• Если вы загружаете содержимое каждый раз, когда отображается popover, вы потеряете весь пользовательский ввод.

Что вы хотите сделать, это загрузить сам объект в 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 content is the 'blah' dive we can make it visisble again.
    //
    $('#blah').show();


});

Ответ 7

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>

Ответ 8

Почему так сложно? просто поставьте это:

data-html='true'