Bootstrap Tooltip Using Class With Jquery

 

Here tooltips are shown using jquery.

 
 
 
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="row col-md-offset-2">When you hover on any button , you will see a different tooltip in different direction according to instructions.</div> <br /> <div class="row"> <div class="col-md-12 col-md-offset-2"> <button class="btn btn-danger btn-md" type="button">Left</button> <button class="btn btn-warning btn-md" type="button">Top</button> <button class="btn btn-success btn-md" type="button">Bottom</button> <button class="btn btn-info btn-md" type="button">Right</button> </div> </div> </body> </html> <script> $(function () { $(".btn-danger").tooltip({ title: "Tooltip On Left", placement: "bottom" }); $(".btn-warning").tooltip({ title: "Tooltip On Top", placement: "top" }); $(".btn-success").tooltip({ title: "Tooltip On Bottom", placement: "bottom" }); $(".btn-info").tooltip({ title: "Tooltip On Right", placement: "right" }); }); </script>
Output