In Bootstrap 4 Tooltip Tutorial With Example, you will learn how to create the tooltip with Bootstrap 4. The tooltip is a small pop up that appears when the user places a mouse pointer over an element such as the button or link to provide hint or information about the element being hovered. You can also set the position of tooltip using data-placement attribute.
Bootstrap 4 Tooltip Tutorial With Example
Bootstrap provides tooltip functionality that enables a stylized tooltip to appear when the user hovers over an element. Tooltips can be helpful for the new visitors of your website because they enable the user to know the purpose of a link a icon by putting the mouse pointer over them.
#1: Bootstrap 4 Tooltip
A tooltip can be created for the HTML element. Tooltips are generally suitable for <a> and <button> elements.
To create a tooltip, You can add the data-toggle=tooltip attribute to an element and use the title attribute to set the content of the tooltip.
Tooltips must be initialized with the jQuery. You can select the specified element and call the tooltip() method.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Tooltip Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Tooltip Example</h2>
<br>
<a href="#" data-toggle="data" title="Hello Investmentnovel">Investmentnovel</a>
</div>
<script>
$(document).ready(function()
{
$('[data-toggle="data"]').tooltip();
});
</script>
</body>
</html>
The example of a Bootstrap tooltip will look like below screenshot.
#2: Bootstrap 4 Position Tooltips
You can also change the position whether the tooltip appears to the right, left, top, or under the element, it is assigned to.
That can be done using the data-placement attribute.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Tooltip Tutorial With 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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>Positioning Tooltip</h2>
<br>
<a href="#" data-toggle="data" data-placement="top" title="Hello Investmentnovel">Investmentnovel</a>
<a href="#" data-toggle="data" data-placement="left" title="Hello Investmentnovel">Investmentnovel</a>
<a href="#" data-toggle="data" data-placement="right" title="Hello Investmentnovel">Investmentnovel</a>
<a href="#" data-toggle="data" data-placement="bottom" title="Hello Investmentnovel">Investmentnovel</a>
</div>
<script>
$(document).ready(function()
{
$('[data-toggle="data"]').tooltip();
});
</script>
</body>
</html>
The example of a Bootstrap positioning tooltip will look like below screenshot.
At last, our Bootstrap 4 Tooltip Tutorial With Example is over.
Krunal Lathiya is an Information Technology Engineer by education and web developer by profession. He has worked with many back-end platforms, including Node.js, PHP, and Python. In addition, Krunal has excellent knowledge of cloud technologies including Google Cloud, Firebase, AWS, and Azure, and various softwares and tools.