#9 Add : Glassmorphic Tooltip Component to GlassyUI

[kodeCraze]

Introducing a new Tooltip component to the GlassyUI library, implementing a glassmorphism theme.

Features

• Displays helpful information on hover
• Customizable text content
• Multiple position options (top, bottom, left, right)
• Glassmorphism styling (transparency, blur effect, frosted glass look)
• Responsive design

Implementation Changes Details.

1. GlassyUIComponentsPage.tsx
2. App.tsx
3. TooltipDetailsPage.tsx
4. Tooltip.tsx

Screenshots

(Screenshot : 1)

(Screenshot : 2)

Checklist

• [+] Component code implemented
• [+] Styling adheres to glassmorphism theme
• [+] Responsive design tested
• [+] Code follows project style guidelines
• [+] Support different positions (top, bottom, left, right).

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
glassyui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Aug 13, 2024 2:03pm

[netlify[bot]]

✅ Deploy Preview for delightful-chaja-870050 ready!

Name	Link
🔨 Latest commit	02a017f46ea8a79aada0b00597a7a7d492800ab8
🔍 Latest deploy log	https://app.netlify.com/sites/delightful-chaja-870050/deploys/66bb67a0d6211f00082124a8
😎 Deploy Preview	https://deploy-preview-10--delightful-chaja-870050.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

❌ Deploy Preview for glassyui failed. Why did it fail? →

Name	Link
🔨 Latest commit	02a017f46ea8a79aada0b00597a7a7d492800ab8
🔍 Latest deploy log	https://app.netlify.com/sites/glassyui/deploys/66bb67a0f9cb720008046200

[Jaishree2310]

Hey @kodeCraze , thank you for completing the issue. Would like you to make some changes such as the small error in the text part and text color. Take a look and correct small changes. The tooltip on the left is not visible with a white font with the background as seen in the shared pic. Also, it shouldn't go to the other component when over over it.

[kodeCraze]

Greetings @Jaishree2310,

Thank you for taking the time to review my code. I appreciate your valuable feedback and the suggestions you've shared. I will carefully consider your recommendations and work on implementing the proposed improvements.

[kodeCraze]

@Jaishree2310 so, i have changed the text color, also tried a new thing, should i keep both the code or should i keep one ? is there any suggestions.

Screenshot : 01

Screenshot : 02

[Jaishree2310]

@Jaishree2310 so, i have changed the text color, also tried a new thing, should i keep both the code or should i keep one ? is there any suggestions.

Screenshot : 01

Screenshot : 02

I think the first picture looks good because the icons accurately do not convey the intended message to the user. Additionally, the tooltip should be displayed on the left instead of the top for better alignment and readability.

[Jaishree2310]

@kodeCraze, I've attached a few pictures that need review. Please ensure that the code is adjusted so the elements don't overlap with other sections or extend beyond the page boundaries. It's important to avoid these issues to maintain a professional presentation of the project.

[Jaishree2310]

@kodeCraze, Any update on this?

[kodeCraze]

@kodeCraze, Any update on this?

I'am Working on it.

[kodeCraze]

Hello @Jaishree2310,

I've submitted a pull request (#9) to add a Glassmorphic Tooltip Component to GlassyUI. I'm excited about contributing to this project and would appreciate your review. Could you please take a look at my changes when you have a moment? I'm particularly interested in any feedback on:

Code quality and style - Does it align with the project's standards? Component functionality - Are there any features missing or improvements needed?

I'm open to any suggestions for improvement and happy to make any necessary changes. If there's anything else I should do to help get this PR ready for merging, please let me know.

Thank you for your time and for considering my contribution! Best regards,

@kodeCraze

[Jaishree2310]

Hey @kodeCraze, It's looking good. But Inside it shows a 404 error page which should not be the case in the components because the main purpose is to help other developers use it effectively and with customized components.

[kodeCraze]

Hey @kodeCraze, It's looking good. But Inside it shows a 404 error page which should not be the case in the components because the main purpose is to help other developers use it effectively and with customized components.

Hi @Jaishree2310 , thanks for the feedback! Could you please share a screenshot or the specific steps that lead to the 404 error? This will help me identify the issue more effectively and ensure the components are working as intended. Appreciate your help!

[Jaishree2310]

@kodeCraze I have merged the PR. Thank you for your contribution!!