Bootstrap 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  www .j  a va  2 s . co m-->
</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. ja v a  2 s  .  c o  m-->
</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>

Bootstrap Tooltip

Add Tooltip

Control the alignment

Introduction

Basic HTML Style

List

Table

Form

Layout

Navigation Bar

Button

Control