How to add a footer to popover and make content scrollable? Using Twitter bootstrap 3

Question

Here is image ( what I have to do )

How to add a footer to popover and make the content scrollable? Using Twitter bootstrap 3

Answer 1

To create a popover with footer you must alter the popovers template and add some CSS to style that footer. Here I also place a button in the footer, as you have included in the drawing, but you must figure out yourself what you want to do with it.

<div class="popover">
   <div class="arrow"></div>
   <h3 class="popover-title"></h3>
   <div class="popover-content"></div>
   <div class="popover-footer">
       <button type="button" class="btn btn-default">Button</button>
   </div>
</div>

$("[rel=details]").popover({
   trigger : 'click',  
   placement : 'bottom', 
   content : 'Lorem ipsum dolor ...',
   template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><button type="button" class="btn btn-default">Button</button></div></div>' 
});

styling the footer :

.popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  background-color: #F7F7F7;
  border-bottom: 1px solid #EBEBEB;
  border-radius: 5px 5px 0 0;
}

make popover-content scrollable :

.popover-content {
  overflow-y : scroll;
  height: 200px;  
}

see demo -> http://jsfiddle.net/3x4yD/