CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
adapap
adapap

Reputation: 147

Dynamically Changing Text in Bootstrap Popovers

I'm looking to create a popover which has multiple pages to it (different content materials) that update when clicking on the popover. The idea is that you toggle the popover and "page1" content loads, clicking on it will load "page2" content.

var $btn = $("#myButton");

$("html").click(function(){
    $btn.popover('hide');
});

$btn.popover({title: "Popover", html: "true", trigger: "manual", placement: "top", content: "<div id='page1'>Page 1</div>"}).click(function(e) {
$btn.popover('toggle');
e.stopPropagation();
});

How can I do something along the lines of this:

$("#page1").click(function() {
    $btn.popover.options.content = 'Page 2';
});

while incorporating the functionality of closing the popover whenever anything else is clicked, such as in this answer?

Upvotes: 0

Views: 182

Answers (2)

dg4220
dg4220

Reputation: 369

I would change your trigger to 'focus' which closes the popover if you click outside the box and add all your content as tabbed content.

Upvotes: 0

Derek
Derek

Reputation: 3435

Use .html to change the content and hide the popup when anything other than #page1 is clicked.

$('body').on('click', '#page1', function(e){
    $(this).html('Page 2');
    e.stopPropagation();
});

$("html").on('click', ':not("#page1")',function(){
    $btn.popover('hide');
});

Fiddle

Upvotes: 1

Related Questions