<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <br/><br/><br/><br/><br/> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="thumbnail"> <div class="shape shape-primary" data-toggle="shape-tooltip" title="GOOD Product"> <div class="shape-icon"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> </div> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="https://d13yacurqjgara.cloudfront.net/users/380540/screenshots/1799008/dribble.jpg"/> <p>Primary badge with Glyphicon </p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <div class="shape shape-danger" data-toggle="shape-tooltip" title="BAD Product"> <div class="shape-icon"> <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> </div> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="https://33.media.tumblr.com/tumblr_neuiq8D0LB1tp9z29o1_1415660624_cover.jpg"/> <p>Danger badge with Glyphicon </p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <div class="shape shape-warning" data-toggle="shape-tooltip" title="BAD Product"> <div class="shape-icon"> <span class="glyphicon glyphicon-thumbs-down" aria-hidden="true"></span> </div> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="https://33.media.tumblr.com/tumblr_neuiq8D0LB1tp9z29o1_1415660624_cover.jpg"/> <p>Warning badge with Glyphicon </p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <div class="shape shape-success" data-toggle="shape-tooltip" title="Discount 10%"> <div class="shape-text"> 10% </div> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="http://fc08.deviantart.net/fs70/f/2014/299/8/d/disney___big_hero_6___baymax_by_briteddy-d849mpn.jpg"/> <p>Success badge with text </p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <div class="shape shape-info" data-toggle="shape-tooltip" title="Discount 35%"> <div class="shape-text"> 35% </div> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="https://img1.etsystatic.com/048/0/9393489/il_fullxfull.667456823_c6bs.jpg"/> <p>Info badge with text </p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <div class="shape shape-default" data-toggle="shape-tooltip" title="GOOD Product"> <div class="shape-icon"> <span class="glyphicon glyphicon-thumbs-up" aria-hidden="true"></span> </div> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="https://d13yacurqjgara.cloudfront.net/users/380540/screenshots/1799008/dribble.jpg"/> <p>Default badge with Glyphicon </p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> <div class="col-md-3"> <div class="thumbnail"> <div class="shape-img"> <img src="http://i.imgur.com/TBEVic8.png" alt="top"/> </div> <div class="caption"> <h3> A default offer</h3> <img alt="kipa" class="img-responsive img-thumbnail" src="https://d13yacurqjgara.cloudfront.net/users/380540/screenshots/1799008/dribble.jpg"/> <p>Image badge</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> </div> </div> <button class="btn btn-default">dasdsadfdfdsgfgdfgdf</button> <br/><br/>

.shape{ height: 60px; width:60px;border-radius:50%;margin:-20px;float:right;} .shape-text{text-align:center;margin-top: calc(50% - 15px);font-size:1.5em;color:white;font-weight:bold;} .shape-icon{text-align:center;margin-top: calc(50% - 20px);font-size:2.5em;} .shape-img{margin:-20px;float:right;} .shape-img img{height: 60px; width:60px;} .thumbnail{min-height:400px;} .shape-success{background:#5CB85C;color:white;} .shape-success + .tooltip > .tooltip-inner {background-color: #5CB85C;width:200px;font-size:1.5em;} .shape-success + .tooltip > .tooltip-arrow { border-bottom-color:#5CB85C; } .shape-info{background:#5BC0DE;color:white;} .shape-info + .tooltip > .tooltip-inner {background-color: #5BC0DE;width:200px;font-size:1.5em;} .shape-info + .tooltip > .tooltip-arrow { border-bottom-color:#5BC0DE; } .shape-warning{background:#F0AD4E;color:white;} .shape-warning + .tooltip > .tooltip-inner {background-color:#F0AD4E;width:200px;font-size:1.5em;} .shape-warning + .tooltip > .tooltip-arrow { border-bottom-color:#F0AD4E; } .shape-primary{background:#337AB7;color:white;} .shape-primary + .tooltip > .tooltip-inner {background-color:#337AB7;width:200px;font-size:1.5em;} .shape-primary + .tooltip > .tooltip-arrow { border-bottom-color:#337AB7; } .shape-danger{background:#D9534F;color:white;} .shape-danger + .tooltip > .tooltip-inner {background-color:#D9534F;width:200px;font-size:1.5em;} .shape-danger + .tooltip > .tooltip-arrow {border-bottom-color:#D9534F;} .shape-default{background:#FFF;color:black;border:3px solid black;} .shape-default + .tooltip > .tooltip-inner {background-color:#000;width:200px;font-size:1.5em;} .shape-default + .tooltip > .tooltip-arrow {border-bottom-color:#000;}

$(function () { $('[data-toggle="shape-tooltip"]').tooltip({placement: 'bottom'}) })