Twitter의 Popover의 컨텐츠로 div를 사용할 수 있습니까?

Twitter의 Popover의 컨텐츠로 div를 사용할 수 있습니까?

---

트위터 부트 스트랩의 팝 오버를 사용하고 있습니다 . 현재 팝 오버 텍스트를 스크롤하면 <a>의 data-content속성에 있는 텍스트만으로 팝 오버가 나타납니다 . 어쨌든 <div>팝 오버 안에 넣을 것이 궁금합니다 . 잠재적으로, 거기에 php와 mysql을 사용하고 싶지만 div를 작동시킬 수 있다면 나머지를 알아낼 수 있다고 생각합니다. 데이터 내용을 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 속성을 사용하십시오. 이것이 기본 옵션입니다.
• HTML 컨텐츠를 리턴하는 사용자 정의 JS 함수를 사용하십시오.

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>

그것이 도움이되기를 바랍니다!

추신 : popover를 사용할 때 제목 속성을 설정하지 않으면 문제가 발생했습니다 ... 따라서 항상 제목을 설정하십시오.

---

jävi의 답변을 바탕으로 ID 또는 다음과 같은 추가 버튼 속성 없이이 작업을 수행 할 수 있습니다.

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

---

Another alternate method if you wish to just have look and feel of pop over. Following is the method. Offcourse this is a manual thing, but nicely workable :)

HTML - button

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

---

Late to the party. Building off the other solutions. I needed a way to pass the target DIV as a variable. Here is what I did.

HTML for Popover source (added a data attribute data-pop that will hold value for destination DIV id/or class):

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

HTML for Popover content (I am using bootstrap hide class):

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

---

In addition to other replies. If you allow html in options you can pass jQuery object to content, and it will be appended to popover's content with all events and bindings. Here is the logic from source code:

• if you pass a function it will be called to unwrap content data
• if html is not allowed content data will be applied as text
• if html allowed and content data is string it will be applied as html
• otherwise content data will be appended to popover's content container

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

---

All of these answers miss a very important aspect!

By using .html or innerHtml or outerHtml you are not actually using the referenced element. You are using a copy of the element's html. This has some serious draw backs.

1. You can't use any ids because the ids will be duplicated.
2. If you load the contents every time that the popover is shown you will lose all of the user's input.

What you want to do is load the object itself into the 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();


});

---

Why so complicated? just put this :

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>

참고URL : https://stackoverflow.com/questions/8875376/is-it-possible-to-use-a-div-as-content-for-twitters-popover