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>
<!-- www. j ava2 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>
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 ww . j ava 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" data-placement="top" title="A nice tooltip">test</a>
</body>
</html>