Add Tooltip to an Icon - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Tooltip

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Tooltip

Description

Add Tooltip to an Icon

Demo Code

ResultView the demo in separate window 



<!DOCTYPE html>
<html>
 <head> 
  <title>Example of Bootstrap Glyphicons with Tooltip</title> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
  <script type="text/javascript">
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip({
        placement : 'top'
    });<!--from w w  w . ja v  a 2s . co  m-->
});
</script> 
 </head> 
 <body> 
  <div> 
   <a href="#"><span class="glyphicon glyphicon-share" data-toggle="tooltip" data-original-title="Share"></span></a> 
   <a href="#"><span class="glyphicon glyphicon-edit" data-toggle="tooltip" data-original-title="Edit"></span></a> 
   <a href="#"><span class="glyphicon glyphicon-download" data-toggle="tooltip" data-original-title="Download"></span></a> 
   <a href="#"><span class="glyphicon glyphicon-repeat" data-toggle="tooltip" data-original-title="Refresh"></span></a> 
   <a href="#"><span class="glyphicon glyphicon-filter" data-toggle="tooltip" data-original-title="Filter"></span></a> 
   <a href="#"><span class="glyphicon glyphicon-cog" data-toggle="tooltip" data-original-title="Setting"></span></a> 
   <br> 
   <br> 
   <p><strong>Note:</strong> Place mouse pointer over icons to reveal the tooltip.</p> 
  </div>   
 </body>
</html>

Related Tutorials