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

Added support for customizable tooltip #264

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

determinationlove
Copy link

PR Checklist

Please check if your PR fulfills the following requirements:

  • Tests for the changes have been added (for bug fixes / features)
  • Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[X] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The current tooltip simply adds a <title> svg tag to the Label element.
But users usually need tooltips to view richer information than simply displaying labels.
React has a lot of tooltip libs, and we need to be able to support using these libs directly without having to reinvent the wheel ourselves.

Issue Number: #184

What is the new behavior?

I changed the Node component and added a new prop tooltip. Tooltip components from other libs can be passed directly into Node.

I placed the preview results of this feature in CustomElements of Basic.stories.tsx and NodeRearranging of Drag.stories.tsx.
The third-party tooltip lib used for demonstration uses Antd.

Does this PR introduce a breaking change?

[ ] Yes
[X] No

Other information

This is my first time contributing to an open source project 🙏

Copy link

netlify bot commented Nov 15, 2024

Deploy Preview for reaflow ready!

Name Link
🔨 Latest commit fff965f
🔍 Latest deploy log https://app.netlify.com/sites/reaflow/deploys/674b5413626b3e00085f798f
😎 Deploy Preview https://deploy-preview-264--reaflow.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

package.json Outdated
@@ -49,6 +49,7 @@
"homepage": "https://github.com/reaviz/reaflow#readme",
"dependencies": {
"@juggle/resize-observer": "^3.4.0",
"antd": "^5.22.0",
Copy link
Member

Choose a reason for hiding this comment

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

Can you use reablocks tooltip? This projecty already uses it.

Copy link
Author

Choose a reason for hiding this comment

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

I tried it but I have a problem when using component of reablocks in reaflow

I'm trying to import reablocks Popover into Basic.stories.tsx
Error screams at me right now:

useTheme must be used within a ThemeProvider

I really don’t know how to solve this Error. using other third-party libraries to achieve custom tooltips doesn’t have this problem at all and can be achieved quickly.

Copy link
Member

Choose a reason for hiding this comment

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

Copy link
Author

@determinationlove determinationlove Nov 30, 2024

Choose a reason for hiding this comment

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

ok, I've changed Node's tooltip props demo to use reablocks.

  • Added tailwindcss
  • Modify postcss.config.cjs to make Tailwind style take effect
  • Modify .storybook/preview.tsx to make stories use reablocks Theme

edit: I just forgot that Drag also has tooltip demo, I fixed it and force push.

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

Successfully merging this pull request may close these issues.

2 participants