부트 스트랩 팝 오버 텍스트를 업데이트하는 방법은 무엇입니까?

부트 스트랩 팝 오버 텍스트를 업데이트하는 방법은 무엇입니까?

---

요소 옆에 메시지를 표시하기 위해 bootstrap-popover를 사용하고 있습니다.

처음 이후에 팝 오버에 다른 텍스트를 표시하려면 텍스트가 변경되지 않습니다. 새 텍스트로 팝 오버를 다시 인스턴스화해도 덮어 쓰지 않습니다.

라이브 예제는 다음 js 바이올린을 참조하십시오.

http://jsfiddle.net/RFzvp/1/

(경고의 메시지와 dom의 메시지가 첫 번째 클릭 후 일치하지 않습니다.) 설명서는 바인딩 해제 방법에 대한 약간의 가벼운 내용입니다. http://twitter.github.com/bootstrap/javascript.html#popovers

내가 이것을 잘못 사용하고 있습니까? 해결 방법에 대한 제안 사항이 있습니까?

감사

---

Hiya 여기에서 작업 데모 를 참조 하십시오 : http://jsfiddle.net/4g3Py/1/

원하는 결과를 얻기 위해 변경했습니다. :)

나는 당신이 이미 무엇을하고 있는지 알고 있다고 생각하지만 샘플에 대한 다음과 같은 내 쪽의 몇 가지 권장 사항 : http://dl.dropbox.com/u/74874/test_scripts/popover/index.html#- 이 링크를 공유하여 제공 소스 고지 속성이 표시 data-content되지만 다음 변경 사항으로 인해 원하는 것이 작동하는 경우 팝 오버가 다른 다른 링크에 대한 아이디어 .

좋은 것을 가지고 이것이 도움이되기를 바랍니다. D' uh 투표하고 답변을 수락하는 것을 잊지 마십시오 :)

Jquery 코드

var i = 0;
$('a#test').click(function() {
    i += 1;

    $('a#test').popover({
        trigger: 'manual',
        placement: 'right',
        content: function() {
           var message = "Count is" + i;
             return message;
        }
    });
    $('a#test').popover("show");

});​

HTML

<a id="test">Click me</a>
​

---

다음과 같이 jquery 데이터 클로저 사전을 사용하여 직접 옵션에 액세스 할 수 있습니다.

$('a#test').data('bs.popover').options.content = 'new content';

이 코드는 팝 오버를 처음 초기화 한 후에도 잘 작동합니다.

---

누군가가을 다시 인스턴스화하지 않고 popover콘텐츠 html을 변경하려는 솔루션을 찾고 있다면 다음을 살펴보십시오.

$('a#test').data('popover').$tip.find(".popover-content").html("<div>some new content yo</div>")

업데이트 : 이 답변이 작성되는 시점과 Bootstrap 3.2.0 (3.0에서 의심합니까?) 사이의 어느 시점에서 이것은 약간 변경되었습니다.

$('a#test').data('bs.popover').tip().find ............

---

오래된 질문이지만 대답이없는 것이 올바른 방법을 제공하고 이것은 일반적인 질문이므로 업데이트하고 싶습니다.

$("a#test").popover("destroy");-method를 사용하십시오 . 여기 바이올린 .

이렇게하면 이전 팝 오버가 파괴되고 새 팝 오버를 정기적으로 다시 연결할 수 있습니다.

다음은 버튼을 클릭하여 이미 팝 오버가 첨부 된 개체에 새 팝 오버를 설정할 수있는 예입니다. 자세한 내용은 바이올린을 참조하십시오.

$("button.setNewPopoverContent").on("click", function(e) {
    e.preventDefault();

    $(".popoverObject").popover("destroy").popover({
        title: "New title"
        content: "New content"
    );
});

---

질문은 1 년이 넘었지만 다른 사람들에게 유용 할 수도 있습니다.

팝 오버가 숨겨져있는 동안에 만 콘텐츠가 변경되는 경우 내가 찾은 가장 쉬운 방법은 함수와 약간의 JS 코드를 사용하는 것입니다.

특히 내 HTML은 다음과 같습니다.

<input id="test" data-toggle="popover"
       data-placement="bottom" data-trigger="focus" />
<div id="popover-content" style="display: none">
  <!-- Hidden div with the popover content -->
  <p>This is the popover content</p>
</div>

Please note no data-content is specified. In JS, when the popover is created, a function is used for the content:

$('test').popover({
    html: true,
    content: function() { return $('#popover-content').html(); }
});

And now you can change anywhere the popover-content div and the popover will be updated the next time is shown:

$('#popover-content').html("<p>New content</p>");

I guess this idea will also work using plain text instead of HTML.

---

You can always directly modify the DOM:

$('a#test').next(".popover").find(".popover-content").html("Content");

For example, if you want a popover that will load some data from an API and display that in the popover's content on hover:

    $("#myPopover").popover({
        trigger: 'hover'
    }).on('shown.bs.popover', function () {
        var popover = $(this);
        var contentEl = popover.next(".popover").find(".popover-content");
        // Show spinner while waiting for data to be fetched
        contentEl.html("<i class='fa fa-spinner fa-pulse fa-2x fa-fw'></i>");

        var myParameter = popover.data('api-parameter');
        $.getJSON("http://ipinfo.io/" + myParameter)
        .done(function (data) {
          var result = '';
          if (data.org) {
            result += data.org + '<br>';
          }
          if (data.city) {
            result += data.city + ', ';
          }

          if (data.region) {
            result += data.region + ' ';
          }
          if (data.country) {
            result += data.country;
          }
          if (result == '') {
            result = "No info found.";
          }
          contentEl.html(result);
        }).fail(function (data) {
          result = "No info found.";
          contentEl.html(result);
        });
    });

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<a href="#" id="myPopover" data-toggle="popover" data-title="IP Details" data-api-parameter="151.101.1.69">Hover here for details on IP 151.101.1.69</a>

This assumes that you trust the data supplied by the API. If not, you will need to escape the data returned to mitigate XSS attacks.

---

I found Bootstrap popover content cannot changed dynamically which introduces the setContent function. My code (hopefully helpful to someone) is therefore:

(Noting that jquery data() isn't so good at setting as it is getting)

// Update basket
current = $('#basketPopover').data('content');
newbasket = current.replace(/\d+/i,parseInt(data));

$('#basketPopover').attr('data-content',newbasket);
$('#basketPopover').setContent();
$('#basketPopover').$tip.addClass(popover.options.placement);

ReferenceURL : https://stackoverflow.com/questions/10226851/how-to-update-bootstrap-popover-text