-
-
Notifications
You must be signed in to change notification settings - Fork 128
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
base: master
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for reaflow ready!
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", |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Take a look at how we did it in reaviz - https://github.com/reaviz/reaviz/blob/master/src/common/Tooltip/ChartTooltip.tsx#L41
There was a problem hiding this comment.
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 makestories
usereablocks
Theme
edit: I just forgot that Drag also has tooltip demo, I fixed it and force push.
1d68935
to
fff965f
Compare
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
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 proptooltip
.Tooltip
components from other libs can be passed directly intoNode
.I placed the preview results of this feature in
CustomElements
ofBasic.stories.tsx
andNodeRearranging
ofDrag.stories.tsx
.The third-party tooltip lib used for demonstration uses Antd.
Does this PR introduce a breaking change?
Other information
This is my first time contributing to an open source project 🙏