How to use Tooltip on Social Media Icons in Bootstrap 5 ?
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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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" > w3wiki </ 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:
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/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel = "stylesheet" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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" > w3wiki </ 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: