Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add TooltipWrapper component for enhanced UI tooltips. #1093

Merged
merged 6 commits into from
Oct 23, 2024

Conversation

Manancode
Copy link
Contributor

@Manancode Manancode commented Oct 16, 2024

This Pull Request introduces the TooltipWrapper component, which provides a reusable solution for displaying tooltips in the UI. The component accepts three props:

children: The elements to be wrapped and displayed.
description (optional): A string that serves as the tooltip text.
className (optional): A string for custom styling of the tooltip wrapper

If the description prop is not provided, the component renders the children without any additional markup.

To use this wrapper :
import { TooltipWrapper } from "./components/ToolTipWrapper";

@Manancode Manancode changed the title feat: Add TooltipWrapper component for enhanced UI tooltips. feat: add TooltipWrapper component for enhanced UI tooltips. Oct 16, 2024
@catosaurusrex2003
Copy link
Contributor

catosaurusrex2003 commented Oct 16, 2024

Making a wrapper for tool-tip makes sense but since our tool-tip doesnt have any css on it.
I dont think we need a wrapper to just add a title html attribute.

Instead can you just add a title attribute to the element where externalDocs tag is being rendered.
It is present in library/src/containers/Info/Info.tsx

@Manancode
Copy link
Contributor Author

I've updated the PR based on feedback. I've removed the TooltipWrapper component and instead added a title attribute directly to the externalDocs link in Info.tsx. This will show the externalDocs description as a tooltip when hovering over the link. Please review and let me know if any further changes are needed. @catosaurusrex2003

@catosaurusrex2003
Copy link
Contributor

Great job @Manancode 🚀

Everything is perfect. I just think that displaying EXTERAL_DOCUMENTATION_TEXT when there is no description will be repetitive.

After that is fixed, it is rtm @AceTheCreator

@Manancode
Copy link
Contributor Author

Done sir @catosaurusrex2003 . Added undefined so the tooltip will only appear when there's a description available. If there's no description, no tooltip will be shown, preventing the repetition of the link text.
Without undefined, an empty tooltip (usually just a small, blank box) would appear when hovering over the link if there's no description.

@catosaurusrex2003
Copy link
Contributor

perfectly done 👌

LGTM 💯

Copy link
Member

@AceTheCreator AceTheCreator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Manancode kindly look into why your lint check is failing

Copy link

@Manancode
Copy link
Contributor Author

Done sir @AceTheCreator

Copy link
Member

@AceTheCreator AceTheCreator left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@AceTheCreator
Copy link
Member

/rtm

@asyncapi-bot asyncapi-bot merged commit 82a30b7 into asyncapi:master Oct 23, 2024
10 checks passed
@asyncapi-bot
Copy link
Contributor

🎉 This PR is included in version 2.4.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants