JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<body>
    <div id ="container" class="container appContainer">
        <div class="row full-height">
            <div class="col-sm-10 full-height">STUFF</div>
            <div class="col-sm-2 full-height">
                <div class="panel panel-default panel-nav">
                    <div class="panel-heading">
                         <h3 class="panel-title">Menu</h3>
                    </div>
                    <div class="panel-body text-center">
                        <button type="button" class="btn btn-default btn-lg btn-popover" data-toggle="tooltip" data-placement="bottom" data-popover="popUser" title="User" id="btnUser"> <span class="glyphicon glyphicon-user"></span>
                        </button>
                        <br/>
                        <button type="button" class="btn btn-default btn-lg btn-popover" data-toggle="tooltip" data-placement="bottom" data-popover="popTask" title="Tasks" id="btnTasks"> <span class="glyphicon glyphicon-tasks"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="popover-menu" id="popUser">
        <div>Userdata</div>
    </div>
    <div class="popover-menu" id="popTask">
        <div class="row">
            <div class="col-sm-3">1</div>
            <div class="col-sm-9">Value</div>
        </div>
        <div class="row">
            <div class="col-sm-3">2</div>
            <div class="col-sm-9">Value</div>
        </div>
        <div class="row">
            <div class="col-sm-3">3</div>
            <div class="col-sm-9">Value</div>
        </div>
        <div class="row">
            <div class="col-sm-3">4</div>
            <div class="col-sm-9">Value</div>
        </div>
        <div class="row">
            <div...

CSS

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.appContainer {
    height: 100%;
    width: 100%;
    padding: 0px;
}
.popover-menu {
    display: none;
}
.full-height {
    height: 100%;
}
.panel-nav {
    height: calc(100% - 30px);
    width: calc(100% + 15px);
    margin-left: -15px;
    border-radius: 0;
}
.panel-nav button {
    margin-bottom: 15px;
}
.popover {
    width: 300px !important;
    
}

JavaScript

$(document).ready(function () {
    $("[data-toggle='tooltip']").tooltip();

    $('.btn-popover').on('shown.bs.popover', function (event) {
        //Set timeout to wait for popup div to redraw(animation)
        setTimeout(function(){
            if($('div.popover').css('top').charAt(0) === '-'){
                 $('div.popover').css('top', '0px');
                 var buttonTop = $(event.currentTarget).position().top;
                 var buttonHeight = $(event.currentTarget).height();
                 $('.popover.left>.arrow').css('top', buttonTop + (buttonHeight/2));
            }
        },100);
    });
    
    
    $(".btn-popover").popover({
        html: true,
        placement: "left",
        container: "body",
        content: function () {
            var popId = "#" + $(this).data("popover");
            return $(popId).html();
        }
    })
        .click(function () {
        $(".btn-popover").not(this).popover("hide");
    });
});