How to show Bootstrap 3 popover scroll only when needed

Question

I have this popover, with a scroll bar

HTML

<ul class="navbar-nav pull-right"> 
<li><a href="#" data-toggle="popover" title="Notifications" data-html="true" data-content="<a href='?Profile'><div class='pop-text'>Notification 1</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 2</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 3</div></a><hr /><a href='?Profile'><div class='pop-text'>Notification 4</div></a><hr /><div><p id='foot-notification-pop'><a href='?notification'>Show all</a></p></div>">Notification</a></li>
</ul>

CSS

.popover-body {
  height: 200px;
  overflow-y: auto;
 }

I want to show the scroll bar only when needed, that is only when the height of the popover-content go over the height of 200px. At the time the scroll bar is always displayed, but is not clickable (of course) when the height is less than 200px. How can i do it? Any help would be greatly appreciated. Thanks!

Answer 1

You can use overflow:auto . Read more about overflow property here