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

외형과 느낌을 원한다면 또 다른 대체 방법입니다. 다음은 방법입니다. 물론 이것은 수동 일이지만 훌륭하게 작동합니다 :)

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를 변수 로 전달하는 방법이 필요했습니다. . 여기 내가 한 일이 있습니다.

Popover 소스 용 HTML ( 대상 DIV id / 또는 클래스에 대한 값을 보유 할 데이터 속성 data-pop 추가 ) :

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

Popover 컨텐츠를위한 HTML (부트 스트랩 숨기기 클래스를 사용하고 있습니다) :

<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 또는 outerHtml을 사용하면 실제로 참조 된 요소를 사용하지 않습니다. 요소의 html 사본을 사용하고 있습니다. 이것은 심각한 단점이 있습니다.

1. ID가 복제되므로 ID를 사용할 수 없습니다.
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>