Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="maincontainer">
    <div id="left-container" class="go-left overflow-y-auto">
        <div id="left-inner-container">Contents</div>
    </div>
    <div id="right-container" class="go-right overflow-y-auto">
        <div id="right-inner-container">
            <div id="button-wrapper">
                <button type="button" id="tip_button" class="btn primary customized-button">tip</button>
            </div>
        </div>
    </div>
</div>
<div id="instructions" style="margin: 20px 0 0 20px; width: 500px;">Click on the "tip" button to make the tooltip appear. Then, with the cursor placed within the right panel (the panel which contains the button), scroll downwards. You'll see the tooltip mispositioned.</div>

CSS

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
 * {
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
    /* Opera/IE 8+ */
}
.go-left {
    float: left;
}
.go-right {
    float: right;
}
.overflow-y-auto {
    overflow-y: auto;
}
.relative {
    position: relative;
}
#maincontainer {
    width: 500px;
    height: 350px;
    border: 2px solid black;
    margin: 20px 0 0 20px;
}
#left-container {
    width: 400px;
    height: 100%;
    border: 1px solid red;
}
#left-inner-container {
    height: 850px;
}
#right-container {
    width: 96px;
    height: 100%;
    border: 1px solid blue;
}
#right-inner-container {
    height: 1000px;
    text-align: center;
}
#button-wrapper {
    margin-top: 100px;
}

JavaScript

$("#tip_button").tooltip({
    trigger: 'click',
    placement: "left",
    title: "Hello I'm a tooltip"
});