How to use Tooltip on Social Media Icons in Bootstrap 5 ?
Last Updated :
19 Feb, 2024
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=
rel="stylesheet">
<script src=
</script>
<link rel="stylesheet" href=
</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=
rel="stylesheet">
<script src=
</script>
<link rel="stylesheet" href=
</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
Share your thoughts in the comments
Please Login to comment...