How to update boot text?

Question

I use bootstrap-popover to show a message next to an element.

If I want to show other text in a popover after the first time, the text will not change. Re-creating a popover with new text is not overwritten.

See this js script for a live example:

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

(warning message and message to dom inconsistently after the first click) The documentation covers a bit how to untie it: http://twitter.github.com/bootstrap/javascript.html#popovers

Am I using this incorrectly? Any suggestions on how to work?

thank

Answer 1

Hiya, please see the demo here: http://jsfiddle.net/4g3Py/1/

I made changes to get the desired result. :)

I believe that you already know what you are doing, but some examples from my end follow below: http://dl.dropbox.com/u/74874/test_scripts/popover/index.html# - share this link to give you the idea of ​​another link with a different pop-over, if you see the data-content source notification attribute, but what you wanted works with the following changes.

Have a good one and hope this helps. Do not forget to vote and accept the answer :)

JQuery code

 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>​ 

Answer 2

You can access the parameters directly using the jquery data closure dictionary, for example:

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

This code should work fine even after the first popover initialization.

Answer 3

anyway, who is looking for a solution that does not require re-creating a popover and just wants to change the contents of the html, look at this:

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

Update:. At some point between this answer and Bootstrap 3.2.0 (I suspect in 3.0?), This has changed a bit to:

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

Answer 4

Old question, but since I notice that the answer does not answer correctly, and this is a general question, I would like to update it.

Use the $("a#test").popover("destroy"); . Here is the script .

This will destroy the old popover and allow you to reconnect the new one.

Here is an example where you can click a button to set a new popover on an object to which a popover has already been added. See Violin for more details.

 $("button.setNewPopoverContent").on("click", function(e) { e.preventDefault(); $(".popoverObject").popover("destroy").popover({ title: "New title" content: "New content" ); }); 

Answer 5

The question is not one year old, but it may be useful for others.

If the content changes only during hiding, the easiest way is to use a function and some JS code.

In particular, my HTML looks like this:

 <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 that the contents of the data are not specified. In JS, when a 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 div-popover-content anywhere, and popover will be updated next time:

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

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

Answer 6

You can always directly modify the DOM:

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

For example, if you want popover to load some data from the API and display this in popover 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 provided by the API. Otherwise, you will need to avoid the returned data to reduce XSS attacks.

Answer 7

I found that the dynamic content of Bootstrap popover cannot be changed , which introduces the setContent function. So my code (hopefully useful for someone):

(Noting that jquery () data is not so good at tuning as it gets)

 // 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);