Added Tooltip on FaceSearchDialog and ProfileAvatar which will be seen on NavBar (Hovering Feature) Feat. #704

[nischaldoescode]

Related Issue: #704 (Issue 1)

Summary

This Pull Request adds descriptive hover tooltips to two navbar icons:

• FaceSearchDialog (Face Scanner)
• User Profile Avatar (Profile)

These tooltips improve discoverability, accessibility, and overall usability of the navigation bar.

---

What Was Changed

Updates were applied to Navbar.tsx to wrap both interactive elements in ShadCN's Tooltip component.

Added imports

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
} from '@/components/ui/tooltip';

Wrapped FaceSearchDialog with Tooltip

<Tooltip>
  <TooltipTrigger asChild>
    <div>
      <FaceSearchDialog />
    </div>
  </TooltipTrigger>
  <TooltipContent side="bottom" sideOffset={8}>
    Face Scanner
  </TooltipContent>
</Tooltip>

Wrapped Profile Avatar with Tooltip

<Tooltip>
  <TooltipTrigger asChild>
    <a href="/settings" className="p-2">
      <img ... />
    </a>
  </TooltipTrigger>
  <TooltipContent side="bottom" sideOffset={8}>
    Profile
  </TooltipContent>
</Tooltip>

---

No other logic was modified, and all existing functionality remains as it was.

Result

• Hovering over the Face Scanner icon now displays the tooltip "Face Scanner".
• Hovering over the Profile icon now displays the tooltip "Profile".
• Both tooltips include a soft fade animation and are fully accessible, supporting keyboard focus and ARIA attributes.

Summary by CodeRabbit

• New Features
  • Navigation tooltips added: hovering the Face Scanner button and Profile avatar now shows descriptive labels to improve discoverability and usability.
• Documentation
  • Updated in-code documentation describing the tooltip UX and affected navigation elements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

This PR adds tooltip wrappers to two interactive elements in the Navbar: the FaceSearchDialog trigger and the user profile avatar, showing "Face Scanner" and "Profile" respectively. No function signatures or exported APIs were changed.

Changes

Cohort / File(s)	Change Summary
Tooltip UI Enhancement frontend/src/components/Navigation/Navbar/Navbar.tsx	Added Tooltip, TooltipTrigger, and TooltipContent imports and wrapped the FaceSearchDialog icon and user profile avatar with tooltip wrappers; configured bottom-positioned tooltip content "Face Scanner" and "Profile". Preserved existing behavior and event handling; added a documentation comment about the updated UX.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Single-file UI change with a repeated wrapper pattern.
• Check accessibility attributes (aria labels/focus) and verify no event propagation or click target changes.
• Verify tooltip styling and positioning across responsive breakpoints.

Possibly related PRs

• Added title and aria-labels to buttons #576 — Accessibility/title/aria-label updates around the FaceSearchDialog and nearby Navbar controls that overlap the same UI elements.

Suggested labels

UI

Suggested reviewers

• rahulharpal1603

Poem

🐰🌿 I hopped along the navbar trail,
Placed tiny signs that never fail,
"Face Scanner" here, "Profile" near —
A rabbit’s hint to make things clear. 🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding hover tooltips to FaceSearchDialog and ProfileAvatar in the NavBar component, matching the code changes in Navbar.tsx.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ded3c4e and 4896d57.

📒 Files selected for processing (1)

• frontend/src/components/Navigation/Navbar/Navbar.tsx (3 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• frontend/src/components/Navigation/Navbar/Navbar.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}