[UI] : Add tooltips to footer social media icons

[Maanvi212006]

Description
Added tooltips to all social media/platform icons in the footer using CustomTooltip from @sistent/sistent

This PR fixes #7746

Notes for Reviewers

• Only one file changed: src/components/SocialLinks-Color/index.js
• react-tooltip is already a dependency in the project — no new packages added
• No existing styles or functionality were modified

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7747/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[Rajesh-Nagarajan-11]

Use custom tooltip from @sistent/sistent

[Maanvi212006]

Also, I noticed that src/components/BlogViewToolTip/index.js and few other files use react-tooltip .
So, maybe we will have to fix that so that the codebase remains consistent?
Let me know

[Katotodan]

Also, I noticed that src/components/BlogViewToolTip/index.js and few other files use react-tooltip . So, maybe we will have to fix that so that the codebase remains consistent? Let me know

Sounds good, give it a try.

[Katotodan]

LGTM

[Bhumikagarggg]

@Maanvi212006 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[Rajesh-Nagarajan-11]

Could be please reduce the size of the tooltip as currently it feels oversized

[Copilot]

Pull request overview

Note

Copilot was unable to run its full agentic suite in this review.

Adds hover tooltips to each footer social icon using CustomTooltip from @sistent/sistent, improving discoverability of what each icon/link represents.

Changes:

• Imported and used CustomTooltip to wrap each social link icon in the footer.
• Added per-platform tooltip text (title) for each icon link.

Comments suppressed due to low confidence (1)

src/components/SocialLinks-Color/index.js:1

• Icon-only links need an accessible name that screen readers can announce. Tooltips generally aren’t a reliable accessible-name source, and the X/Twitter link uses an SVG component (<TwitterIcon />) which may end up with no readable label. Add an aria-label (or visually hidden text) on each <a> so every social link has a clear, descriptive accessible name (e.g., “Follow Layer5 on X (Twitter)”, “Layer5 on GitHub”, etc.).

import React from "react";

[Rajesh-Nagarajan-11]

Worth considering copilot's suggestions