So i was wondering... I'm using Twitter's Bootstrap for my Project and i made a small notification Popover / Clickover (.html) feature. And 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: /

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...

So i was wondering... I'm using Twitter's Bootstrap for my Project and i made a small notification Popover / Clickover (http://www.leecarmichael./bootstrapx-clickover/examples.html) feature. And 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/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...

• javascript
• twitter-bootstrap
• popover
• jsfiddle

2 Answers 2

.popover-content {
    max-height: 300px;
    overflow-y: auto;
}

just add some css to give the popover a fixed height and scrollbars:

.popover-inner {
   height: 250px;
   overflow:scroll;
}

The fiddle is here: http://jsfiddle/6GRHa/4/