"Bootstrap V4 Side Menu with Tooltip"
Bootstrap 4.1.1 Snippet by pradeep330

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="wrapper" class="animate">
<nav class="navbar header-top fixed-top navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav animate side-nav">
<li class="nav-item">
<a class="nav-link" href="#" title="Cart"> <i class="fas fa-cart-plus"></i><span class="ttip">Add Cart</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" title="Comment"> <i class="fas fa-comment"></i><span class="ttip">Chat</span></a>
</li>
</ul>
<ul class="navbar-nav ml-md-auto d-md-flex">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-user"></i> Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-key"></i> Logout</a>
</li>
</ul>
</div>
</nav>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
body{background:#f3f3f3;}
#wrapper{padding:90px 15px;}
.navbar-expand-lg .navbar-nav.side-nav{flex-direction: column;}
.header-top{box-shadow: 0 3px 5px rgba(0,0,0,.1)}
@media(min-width:992px) {
#wrapper{margin-left:70px}
.navbar-nav.side-nav{text-align:center;background: #585f66;box-shadow: 2px 1px 2px rgba(0,0,0,.1);position:fixed;top:59px;flex-direction: column!important;left:0px;width:70px;bottom:0;padding-bottom:40px}
.side-nav li { border-bottom: 1px solid #50575d;}
.side-nav li a {padding: 20px;display:block;position:relative;}
.navbar-nav li a svg{font-size: 25px;margin: 0 10px 0 5px;}
.navbar-nav li a .ttip {opacity:0;position:absolute; background: #333;
left: 0px;
white-space: nowrap;
top: 16px;
border-radius: 3px;
padding: 5px 10px;
transition: .5s ease all;}
.navbar-nav li a:hover .ttip {opacity:1;left: 70px;}
.navbar-nav li a .ttip:after {
right: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-right-color: #333;
border-width: 5px;
margin-top: -5px;
}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
$(document).ready(function () {
$('.leftmenutrigger').on('click', function (e) {
$('.side-nav').toggleClass("open");
$('#wrapper').toggleClass("open");
e.preventDefault();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Light Bootstrap Dashboard PRO
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)
Accordian Menu

Questions / Comments: