CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
CherylG
CherylG

Reputation: 1052

Multiple popover (popover on top of popover) in boostrap 3?

I am looking to implement a menu that a user clicks the first level button, it has a popover effect. Then a user clicks on the second level menu, another popover shows up. I tried looking up online but there isn't much useful information. Is it doable? The mock picture has been attached below. enter image description here

Upvotes: 1

Views: 273

Answers (1)

Said Kholov
Said Kholov

Reputation: 2486

  1. You need to set your popover content to support html as per official documentation.

  2. You need to initialise your second popover after your first popover is triggered.

HTML:

<button id="firstpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right">
  Popover on left
</button>

<button id="secondpopover" type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-content="test" data-placement="right">  Popover on left
</button>

JS:

var second = $('#secondpopover').remove();
var first = $('#firstpopover');

second.show();
first.data('content', second);

first.popover({html: true});

first.on('shown.bs.popover', function () {
    second.popover();
})

first.on('hidden.bs.popover', function () {
    second.popover('hide');
})

CSS: 

#secondpopover {
    display: none;
}

DEMO

Upvotes: 2

Related Questions