Bootstrap 4 Tooltip Tutorial With Example

0 Shares

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.

Table of Contents

Bootstrap 4 Tooltip Tutorial With Example
#1: Bootstrap 4 Tooltip
Example
#2: Bootstrap 4 Position Tooltips
Example

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.