How to use Tooltip on Social Media Icons in Bootstrap 5 ? - Coding

In Bootstrap, Tooltips can be added to the social media icons that can be displayed on the icon’s hover. Tooltips enhance the user experience by offering quick hints, tips, or clarifications that help users understand the functionality of interface elements, navigate through a website or application more effectively, and reduce confusion. We can achieve the tooltip effect in Bootstrap with various utilities including data-bs-toggle and data-bs-placement.

Syntax:

<i class="fab fa-linkedin"  
     data-bs-toggle="tooltip" data-bs-placement="top" 
      title="Title">
</i>

Table of Content

Using data-bs-toggle Class
Using data-bs-toggle and data-bs-placement Classes

Using `data-bs-toggle` Class

To use the tooltip on social media icons, we have to use the data-bs-toggle attribute. The JavaScript code selects all elements with the attribute data-bs-toggle="tooltip" using document.querySelectorAll('[data-bs-toggle="tooltip"]'). Then, it initializes Bootstrap’s Tooltip plugin for each of these elements.

Example 1: Illustration of the usage of tooltips on social media icons in Bootstrap.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap Tooltip</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
 
<body>
    <main class="container">
        <h1 class="text-success text-center">
          GeeksforGeeks
          </h1>
        <h2 class="text-center">
          Tooltip on social media icons in Bootstrap 5
          </h2>
        <div class="container mx-auto text-center">
            <i class="fab fa-linkedin h1 
                      text-primary mx-4 my-4" 
               data-bs-toggle="tooltip"
               title="Linkedin">
              </i>
            <i class="fab fa-twitter 
                      h1 text-info mx-4" 
               data-bs-toggle="tooltip"
               title="Twitter">
              </i>
        </div>
    </main>
   
    <script>
        let tooltipTriggerList = [].slice
            .call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        let tooltipList = tooltipTriggerList
            .map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
    </script>
</body>
 
</html>

Output:

Output

Using `data-bs-toggle and data-bs-placement` Classes

To set the tooltip positions, we can use the data-bs-placement attribute. The data-bs-placement attribute specifies the position of the tooltip (left for LinkedIn, right for Twitter). Bootstrap’s data-bs-toggle="tooltip" attribute is added to enable tooltips.

Example 2: Illustration of the usage of tooltips on social media icons with tooltip position.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>Bootstrap Tooltip</title>
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">
    <link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          rel="stylesheet">
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
      </script>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
 
<body>
    <main class="container">
        <h1 class="text-success text-center">
          GeeksforGeeks
          </h1>
        <h2 class="text-center">
          Tooltip on social media icons with Position
          </h2>
        <div class="container mx-auto text-center">
            <i class="fab fa-linkedin h1 
                      text-primary mx-4" 
               data-bs-toggle="tooltip"
               data-bs-placement="left"
               title="Linkedin">
              </i>
            <i class="fab fa-twitter 
                      h1 text-info mx-4" 
               data-bs-toggle="tooltip"
               data-bs-placement="right"
                title="Twitter">
              </i>
        </div>
    </main>
   
    <script>
        var tooltipTriggerList = [].slice
            .call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList
            .map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        })
 
    </script>
</body>
 
</html>

Output:

Output

Reffered: https://www.geeksforgeeks.org

Bootstrap

Related
How to install Bootstrap 5?
How to style Vertical Zebra-Striped Table in Bootstrap 5 ?
Bootstrap 5 Forms Layout
How to change font size of Table Content in Bootstrap 5?
How to Create a Card with Tabs & Content in Bootstrap 5 ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	14