<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="col-xs-12 bhoechie-tab-container"> <div class="bhoechie-tab-menu"> <div class="col-md-3"> <div class="list-group"> <a href="#" data-trigger="hover" data-placement="right" data-toggle="popover" title="name" data-content="content" class="list-group-item text-center activef"> <h4 class=""></h4>tab1<br/> </a> <a href="#" data-trigger="hover" data-placement="left" data-toggle="popover" title="name" data-content="content" class="list-group-item text-center activef"> <h4 class=""></h4>tab2<br/> </a> <a href="#" data-trigger="hover" data-placement="left" data-toggle="popover" title="name" data-content="content" class="list-group-item text-center activef"> <h4 class=""></h4>tab3<br/> </a> <a href="#" data-trigger="hover" data-placement="bottom" data-toggle="popover" title="name" data-content="content" class="list-group-item text-center activef"> <h4 class=""></h4>tab4<br/> </a> </div> </div> </div> </div> </div>

/* bhoechie tab */ .bhoechie-tab-container{ z-index: 10; background-color: #f1f1f1; border-radius: 10px; margin-top: 20px; background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ background-color: #f1f1f1; margin-bottom: 0; border-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: #255576 } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-left-radius: 0; -moz-border-top-left-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; border-bottom: 1px solid #ddd; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a:hover, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a:hover .fa, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: #255576; color: #f1f1f1; } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; right: 100%; top: 50%; margin-top: -13px; border-right: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-right: 10px solid @brand-primary; } div.bhoechie-tab-content{ background-color: #f1f1f1; padding-right: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; }

$(function () { $('[data-toggle="popover"]').popover() })