Edited: [Solved]
[Solution]
CSS:
.popover-content {
max-height: 300px;
overflow-y: auto;
}
[Question]
So I was wondering... I'm using Twitter's Bootstrap for my Project and I made a small notification Popover / Clickover (http://www.leecarmichael.com/bootstrapx-clickover/examples.html) feature. I was wondering how I can manage to make it on a static height with a custom scroll bar in it...
My basic Concept of creating this popover/clickover is:
$(function () {
$("[rel='tooltip']").tooltip({container: 'body'});
});
$("#notices").clickover({
content:data,
html:true,
container:'body'
,onShown: function () {$("#notices").tooltip("destroy");},
onHidden: function () {$("#notices").tooltip({container:'.navbar'});},
template: '\
<div class="popover notices">\
<div class="arrow"></div>\
<div class="popover-inner">\
<div class="popover-header">\
<h3 class="popover-title"></h3>\
<h3 class="popover-settings"><a href="/notifications.php?act=settings">Settings</a></h3>\
</div>\
<div class="popover-content">\
<p></p>\
</div>\
<h3 class="popover-footer"><center><a href="/notifications.php">See All</a></center></h3>\
</div>\
</div>'
});
With HTML
<div id='userbar' class='btn-group input-prepend input-append'>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button class='btn'></button>
<button id='notices' class='btn' rel='tooltip' data-placement='bottom' data-original-title='Notifications'> <i class='icon-exclamation-sign icon-large'> <span class='badge badge-important'>102</span></i></button>
</div>
So I made a post on JSFiddle about that. I have not included bootstrap directives from bootstrap's site but I have posted the code in the Javascript Section because tooltips are a bit modified. So may be a lot of code lines, though my main code is at the end...
The link is: http://jsfiddle.net/6GRHa/3/
The button with the Popover is the "Exclamation mark"
And like I said I want to Apply to it a custom height and a scrollable bar to be there for more content... Thank you in advance...
Be careful with the backslash to concat strings...
1: Its part of the ES5 standard which isn't supported by all browsers yet.
2: Depending on the browser it will include white space aswell: