Bootstrap Tutorial - Bootstrap Tooltip Intro








Add Tooltip

<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
<!--from  w w  w . j  a  va2  s  . c  om-->
</head>
<body style='margin: 20px;'>
  <script type='text/javascript'>
    $(document).ready(function() {
      if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
      }
    });
  </script>

  <a href="#" rel="tooltip" title="A nice tooltip">test</a>

</body>
</html>

Click to view the demo





Control the alignment

We can use the following statements to control the alignment of a tooltip.

  • data-placement="top"
  • data-placement="bottom"
  • data-placement="right"
<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
<!--from w w w.j a  v a2s  . c om-->
</head>
<body style='margin: 20px;'>
  <script type='text/javascript'>
    $(document).ready(function() {
      if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
      }
    });
  </script>

  <a href="#" rel="tooltip" data-placement="top" title="A nice tooltip">test</a>


</body>
</html>

Click to view the demo