<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 rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous"> <div class="badge_wrapper"> <ul class="nav"> <li> <a href="#" onclick="f()" class="btn btn-primary btn-circle btn-xl"> <span class="fas fa-tags"></span></a> <span class="items-count"> <span class=" notification-counter">123123</span> </span> </li> </ul> <div class="slide active"> <div class="coupon"> <div class="info">Some more info</div> <span>09305762180</span> </div> </div> </div>

.slide{ border: 1px solid red; position: fixed; background-color: #eee; padding: 10px; right: 79px; display: none; bottom: 40px; max-width: 600px; max-height: 400px; overflow: auto; } .slide.active { display: block; } .coupon{ display: inline-block; background-color: white; padding: 10px; margin:5px; text-align: center; border-radius: 5px; position: relative; } .coupon:hover .info{ display: block; border:1px solid red; } .coupon:active .info{ display: block; border:1px solid red; } .info{ display: none; position: fixed; background: white; padding:10px; z-index:1; } .ext-wrappe{ position: relative; } .badge_wrapper { position: fixed; bottom: 40px; right: 30px; width: 48px; z-index: 999; cursor: pointer; background-position: 50%; } .nav { margin-bottom: 0; padding-left: 0; list-style: none; } .nav > li { position: relative; display: block; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 38px; line-height: 1.6; border-radius: 35px; } .btn-primary { background: #4285F4; } .btn { border-radius: 2px; border: 0; transition: .2s ease-out; color: #fff; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } .btn-primary { color: #fff; background-color: #3097D1; border-color: #2a88bd; } .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.6; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .items-count { position: relative; display: -ms-flexbox; display: flex; text-align: center; -ms-flex-pack: center; justify-content: center; top: -55px; } .notification-counter { position: absolute; left: 8px; background-color: #d4130d; color: #fff; border-radius: 3px; padding: 1px 3px; font: 12px Verdana; }

function f(){ $('.slide').toggle('.active'); }