Bootstrap 4 Tooltip
Bootstrap 4 Tooltip
Tooltip
Bootstrap 4 offers a tooltip component, a small popup box that appears when you move the cursor over an element such as buttons or any highlighted element. It is also used to provide hints about any element. The tooltip describes the purpose of the hyperlinks when you move the cursor over it.
Steps for creating Tooltip
Add the data-toggle=" tooltip" attribute along with the title attribute to the <a> element. The value of the title attribute is the text that will be displayed in the popup box when you move the cursor over an element.
Note: You need to add jQuery code to initialize the all tooltip option in one way.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltip Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Tooltip</h3>
<a href="#" data-toggle="tooltip" title="Tooltip">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Output
Positioning Tooltip – Bootstrap 4 allows you to set the position of the tooltip (popup box) on your own. You can set the position of the tooltip to the right, left, bottom, and top.
- Add the data-placement=" left" attribute to set the tooltip position to the left of the element.
- Add the data-placement=" right" attribute to set the tooltip position to the right of the element.
- Add the data-placement=”bottom” attribute to set the tooltip position to the bottom of the element.
- Add the data-placement=”top” attribute to set the tooltip position to the top of the element.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Tooltip Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h3>Tooltip</h3>
<p><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></p>
<p><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></p>
<p><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></p>
<p><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Output
