Show Output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example of Bootstrap 3 Tooltip Options</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#myTooltips a").tooltip({ placement: 'auto top' }); }); </script> <style type="text/css"> .bs-example{ margin: 10px 50px; } a{ margin: 10px; font-size: 24px; display: inline-block; } </style> </head> <body> <div class="bs-example"> <div id="myTooltips"> <a href="#" data-toggle="tooltip" title="Edit Document"><span class="glyphicon glyphicon-edit"></span></a> <br> <a href="#" data-toggle="tooltip" title="Save Document"><span class="glyphicon glyphicon-floppy-disk"></span></a> <br> <a href="#" data-toggle="tooltip" title="Download Document"><span class="glyphicon glyphicon-download-alt"></span></a> <br> <a href="#" data-toggle="tooltip" title="Print Document"><span class="glyphicon glyphicon-print"></span></a> <br> <a href="#" data-toggle="tooltip" title="Delete Document"><span class="glyphicon glyphicon-trash"></span></a> <br> <a href="#" data-toggle="tooltip" title="Settings"><span class="glyphicon glyphicon-cog"></span></a> </div> <p><strong>Note:</strong> If you place the mouse pointer over the icons tooltip will be displayed on the top side whenever there is sufficient space to display the tooltip on the top side of it, otherwise it is displayed on bottom (as you can see in case of the first icon) since the placement value is "auto top".</p> </div> </body> </html>
