Bootstrap 5 Tooltips Usage Markup

Last Updated : 30 Jan, 2023

Bootstrap 5 Tooltip is one of the components which provide small, interactive, textual hints for elements. They are used to provide additional information about a specific element when the user hovers over it or focuses on it.

Bootstrap 5 Tooltips Usage Markup: The markup required for the tooltips are the data attribute and the title which we want to display on the popover element.

Syntax:

To pass the tooltip we use data-attribute as follows:

 data-bs-toggle="tooltip."

To pass the title we use title attribute:

<tag class="" data-bs-toggle="tooltip" 
         title="title you want display">
     ...
</tag>

Example 1: In this example, we will demonstrate the bootstrap 5 tooltip on a button component.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
</head> 
  
<body class="text-center"> 
    <h1 class="text-success">GeeksforGeeks</h1> 
  
    <h3>Bootstrap 5 Tooltips Usage Markup</h3> 
  
    <button id="my-button" type="button" class="btn btn-primary"
            data-toggle="tooltip" title="tooltip on bottom"
            data-bs-placement="bottom"> 
        Hover over me 
    </button> 
  
    <script> 
        $(document).ready(function() { 
            $('#my-button').tooltip(); 
        }); 
    </script> 
</body> 
  
</html>

Output:

Bootstrap 5 Tooltips Usage Markup

Example 2: In this example, we will demonstrate bootstrap 5 tooltip on a link.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1"> 
  
    <link href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet"> 
    <script src= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"> 
    </script> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"> 
    </script> 
</head> 
  
<body class="text-center">     
    <h1 class="text-success">GeeksforGeeks</h1> 
    <h3>Bootstrap 5 Tooltips Usage Markup</h3> 
    <a href="#" id="tooltip_id" 
       data-toggle="tooltip" 
       title="Tooltip on a link"> 
        Link with tooltip 
    </a> 
    <script> 
        $(document).ready(function() { 
            $('#tooltip_id').tooltip(); 
        }); 
    </script> 
</body> 
</html>