How to use Tooltip on Social Media Icons in Bootstrap 5 ?
Last Updated :
28 Apr, 2025
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>
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:
OutputUsing 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
Similar Reads
How to add tooltip to an icon using Bootstrap ? In this article, we will see how to add tooltip element to an icon using Bootstrap. A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. The tooltip is quite useful for displaying the description of different elements on the webpage.
2 min read
How to set position of tooltip in a button in Bootstrap ? A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when the user mouse moves over it, the additional information "A computer Science Portal" popup will display. We are g
2 min read
How to Position Tooltip in button using Bootstrap ? In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper.js) before bootstrap.js in order for the tooltip to work. Approach: The required markup for positing tooltip is on data-placem
3 min read
How to add icons in project using Bootstrap ? Bootstrap Icons is an open-source icon library specifically designed for use with Bootstrap's framework. Adding icons using Bootstrap means integrating the Bootstrap Icons library into your project and using its icon classes in HTML. This allows easy inclusion of scalable, customizable icons directl
2 min read
Bootstrap 5 Tooltips Usage Options Bootstrap 5 Tooltip usage options can be passed through the data attributes or via JavaScript. To pass the options through data attributes we have to append the option name with the data-bs for example data-bs-animation="true".Some of the many options available are:animation: It is used to apply ani
4 min read
How to Insert a Search Icon in Bootstrap ? In this article, we will see how to insert a search icon in Bootstrap. While Bootstrap does not include an icon set by default, they do have their own comprehensive icon library called Bootstrap Icons. Feel free to use them or any other icon set in your project. There are various ways to add a searc
3 min read