How to update bootstrap popover text?

bootstrap popover dynamic content
bootstrap popover position issue
bootstrap popover example div content
bootstrap 4 popover html content
bootstrap 4 change popover content
bootstrap popover container
bootstrap popover change
bootstrap popover template

I am using bootstrap-popover to show a message beside an element.

If I want to show different text in the popover after the first time, the text does not change. Re instantiating the popover with new text does not overwrite.

See this js fiddle for a live example:

(The message in the alert and the message in the dom is inconsistent after the first click) The documentation is a bit light on how to unbind:

Am I using this wrong? The Any suggestions on how to work around?


Hiya please see working demo here:

I have made the changes to get your desired outcome. :)

I reckon you already know what you are doing but some example recommendations from my end as follows for sample: - sharing this link to give you idea for different link with different pop-over if you will see the source notice attribute data-content but what you wanted is working by the following changes.

Have a nice one and hope this helps. D'uh don't forget to up vote and accept the answer :)

Jquery Code

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

        trigger: 'manual',
        placement: 'right',
        content: function() {
           var message = "Count is" + i;
             return message;



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

Popovers � Bootstrap, Zero-length title and content values will never show a popover. Specify container: 'body' to avoid rendering problems in more complex components (like our input� Tip: Plugins can be included individually (using Bootstrap's individual "popover.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). How To Create a Popover To create a popover, add the data-toggle="popover" attribute to an element.

You can access the options directly using the jquery data closure dictionary like this:

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

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

Bootstrap popover content update - JSFiddle, <button class="btn btn-inverse btnpop">ClickMe</button>. 3. . JavaScript + jQuery 1.8.3 Tidy. xxxxxxxxxx. 21. 1. $('.btnpop').popover({. 2. title: 'Dynamic� Bootstrap 4 Popover. The Popover component is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

just in-case anyone's looking for a solution that doesn't involve re-instantiating the popover and just want to change the content html, have a 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 being written and Bootstrap 3.2.0 (I suspect at 3.0?) this changed a little, to:

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

Bootstrap JS Popover Reference, The data-content attribute specifies the text that should be displayed inside the popover's body. Example. <a href="#" data-toggle="popover" title=� The following code update the popover content just before it is displayed: // When the popover is show $('.my-popover').on('', function { // Update popover content $(this).attr('data-content', 'New content'); }) Test online on this JSFiddle.

Old question, but since I notice that the no answer provides the correct way and this is a common question, I'd like to update it.

Use the $("a#test").popover("destroy");-method. Fiddle here.

This will destroy the old popover and enable you to connect a new one again the regular way.

Here's an example where you can click a button to set a new popover on an object that already has a popover attached. See fiddle for more detail.

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

        title: "New title"
        content: "New content"

Bootstrap Popover, Use the title attribute to specify the header text of the popover, and use the data- content attribute to specify the text that should be displayed inside the popover's� Questions: Good day. I use bootstrap 3 popover. And now i would like link on text popvover. Code: link on content " data-original-title="test title" > test link But

The question is more than one year old, but maybe this would be usefull for others.

If the content is only changed while the popover is hidden, the easiest way I've found is using a function and a bit of JS code.

Specifically, my HTML looks like:

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

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

    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.

Popover doesn't update when template is changed � Issue #5446 , I'm wanting to do this so I can update the content after the popover has been rendered, so yes, if I could define a template for the popover but� This is my code, but it will not work. When I use the native Bootstrap PopOver with HTML in it's content, the frontend is not displaying that PopOver and the HTML Source is malformatted.

How to Create Popovers with Bootstrap 4, Whereas, popover's title and its content that would display upon trigger or activation can Popovers can be triggered via JavaScript — just call the popover () Bootstrap method with This method updates the position of an element's popover. Change popover background and text color in Bootstrap-4 while you are using sass-bootstrap-4 you can do easily by just changing some variables values. These are the variables in _variables.scss file:

Bootstrap Popovers, Bootstrap popover is a component which displays a box with a content after a click on an element - similar to the Updates the position of an element's popover. I am using a Bootstrap Popover in a 'Repeat Region' which displays Testimonials. Each testimonials has a 'View Property Details' button which opens up the popover. In the Pop over I am wanting to d

Bootstrap Popovers, Bootstrap popovers. Bootstrap Bootstrap popover is a small overlay of content that is used to Updates the position of an element's popover. $('#fubar').popover({ trigger : 'hover', html : true, dataContainer : '.modal-body', etc }); then you fix the z-index problem, but the popover width is still wrong. The only fix I can find is to use container: 'body' and to add some extra css:.popover { max-width : 400px; z-index : 1060; }

  • :P @Chris you bruv are a legend innit :), glad it helped!
  • @ThomasReggi MAGIC! I logged into SO after long time :) for this comment only, NO worries man! Glad it helped you bruv! lol
  • @BlueSmith Glad it helped :)
  • Thank you it helped a lot, i had an issue with $('#search').popover('destroy'); not working, and it seem the reason was using $('#search').popover('toggle'); instead of $('#search').popover('hide'); and trigger: 'manual', however although your demo works, in my case it only worked with a $('#search').popover('destroy'); call
  • Note that you can't use this with a default content through data attribute, it will always take the default content.
  • nice one. I had to also do a $(this).popover('show'); for a popover that was already visible to update
  • In bootstrap 3 the namespace is changed: you have to: $('a#test').data('bs.popover').options.content = 'new content';
  • @user698585 it would have been nice if you had kept the old namespace and just added the new one. looks like BS2 simply had no namespace, so it's .data('popover'),options.content = "new content"
  • This is also handy but I guess when bootstrap itself allows for placing function instead of a static reference, then why using a hack??
  • @Farzad YZ: What do you mean exactly? can you please suggest an alternative?