<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="A"> <span></span> <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdfsdf" id="aButton">A</button> <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="bButton">B</button> <button type="button" class="btn" data-toggle="tooltip" data-original-title="Default tooltip" title="sdljkfl" id="cButton">C</button> </div>

body { padding: 60px 0px; } .navbar-collapse { position: relative; padding-top: 30px !important; max-height: 270px; } .navbar-collapse form[role="search"] { position: absolute; top: 0px; right: 0px; width: 100%; padding: 0px; margin: 0px; z-index: 0; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 8px 12px; border-radius: 0px; border-width: 0px; color: rgb(119, 119, 119); background-color: rgb(248, 248, 248); border-color: rgb(231, 231, 231); box-shadow: none; outline: none; } .navbar-collapse form[role="search"] input { padding: 16px 12px; font-size: 14pt; font-style: italic; color: rgb(160, 160, 160); box-shadow: none; } @media (min-width: 768px) { .navbar-collapse { padding-top: 0px !important; padding-right: 38px !important; } .navbar-collapse form[role="search"] { width: 38px; } .navbar-collapse form[role="search"] button, .navbar-collapse form[role="search"] input { padding: 15px 12px; } .navbar-collapse form[role="search"] input { padding: 25px 12px; font-size: 18pt; opacity: 0; display: none; } .navbar-collapse form[role="search"].active { width: 100%; } .navbar-collapse form[role="search"].active button, .navbar-collapse form[role="search"].active input { display: table-cell; opacity: 1; } .navbar-collapse form[role="search"].active input { width: 100%; text-align: right; } .navbar-collapse form[role="search"].active button[type="submit"] { background-color: rgb(231, 231, 231); } }

$(function () { $('.A .btn').tooltip(); });