<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <div class="container"> <div class="row"> <div id="inbox"> <div class="fab btn-group show-on-hover dropup"> <div data-toggle="tooltip" data-placement="left" title="Compose" style="margin-left: 42px;"> <button type="button" class="btn btn-danger btn-io dropdown-toggle" data-toggle="dropdown"> <span class="fa-stack fa-2x"> <i class="fa fa-circle fa-stack-2x fab-backdrop"></i> <i class="fa fa-plus fa-stack-1x fa-inverse fab-primary"></i> <i class="fa fa-pencil fa-stack-1x fa-inverse fab-secondary"></i> </span> </button></div> </div> </div> </div> </div>

body{ padding:10px; } .fab { cursor: pointer; } .fab-backdrop { color: rgba(255, 255, 255, 0); } .fab-primary, .fab-secondary { transition: all 0.35s ease-in-out; } .fab.active .fab-primary { opacity: 0; transform: rotate(225deg); } .fab-secondary { opacity: 0; transform: rotate(-225deg); } .fab.active .fab-secondary { opacity: 1; transform: rotate(0); margin-top: -2px; } #inbox .show-on-hover:hover > ul.dropdown-menu { display: block; } #inbox .show-on-hover { position: absolute; bottom: 80px; right: 80px; } #inbox .btn-io{ border-radius: 50%; height: 54px; width: 54px; padding: 0 !important; box-shadow: 0px 3px 7px 0px rgba(202, 124, 124, 0.72); } #inbox .dropup .dropdown-menu, .navbar-fixed-bottom .dropdown .dropdown-menu { top: auto; bottom: 100%; margin-bottom: 1px; margin-bottom: -5px; padding-bottom: 30px; } font-size: 22px; }

$('.fab').hover(function () { $(this).toggleClass('active'); }); $(function () { $('[data-toggle="tooltip"]').tooltip() })